@layer addon {
    .templateBlocks {
        &.image {
            .splide[data-splide-state="mobile"], .splide[data-splide-state="disabled"] {
                .item {
                    @media (min-width: 56em) {

                        &:nth-child(-n+3) {
                            border-top: 2px solid var(--color-light);
                        }
                        width: calc(33.3333% - calc(var(--section) / 2));
                        
                        .slides-1 &,
                        .slides-2 &,
                        .slides-4 & {
                            width: calc(50% - calc(var(--section) / 2));
                            &:nth-child(-n+2) {
                                border-top: 2px solid var(--color-light);
                            }
                        }
                    }
                    @media (--min-fablet) {

                        &:nth-child(-n+3) {
                            border-top: 2px solid var(--color-light);
                        }
                        width: calc(33.3333% - calc(var(--section) / 2));
                        
                        .slides-1 &,
                        .slides-2 &,
                        .slides-4 & {
                            width: calc(50% - calc(var(--section) / 2));
                            &:nth-child(-n+2) {
                                border-top: 2px solid var(--color-light);
                            }
                        }
                    }
                }
            }
            .splide__list {
                row-gap: 0;
                @media (min-width: 56em) {
                    column-gap: calc(var(--section) / 2);
                    .item {
                        padding: calc(var(--padding) * 2) 0;
                        .media {
                            max-width: 256px;
                            margin: 0 auto var(--gutter);
                        }
                    }
                }
                @media (--min-fablet) {
                    column-gap: calc(var(--section) / 2);
                    .item {
                        padding: calc(var(--padding) * 2) 0;
                        .media {
                            max-width: 256px;
                            margin: 0 auto var(--gutter);
                        }
                    }
                }
                .item {
                    border-bottom: 2px solid var(--color-light);
                    @media (max-width: 56em) {
                        padding: var(--padding) 0;
                        &:first-child {
                            border-top: 2px solid var(--color-light);
                        }
                    }
                    @media (--max-fablet) {
                        padding: var(--padding) 0;
                        &:first-child {
                            border-top: 2px solid var(--color-light);
                        }
                    }
                    .block {
                        gap: var(--gutter);
                        padding: 0;
                        border-radius: 0;
                    }
                    .inner {
                        .intro {
                            flex: 1;
                        }
                        .button {
                            width: 100%;
                            .themeColor1 & {
                                background: none;
                                box-shadow: inset 0 0 0 2px var(--color-light);
                                color: var(--color-light);
                            }
                        }
                    }
                }
            }
        }
    }    
}