@layer addon {
    .templateTextImageSlider {
        .grid {
            grid-column: span 12;

            width: calc(100% + calc(var(--spacer) * 2));
            margin: 0 calc(var(--spacer) * -1);

            .splide {
                max-width: 100%;

                .splide__slide {
                    &.withText {
                        width: 50%;
                        @media (min-width: 64em) {
                            width: calc(100% / 3);
                        }
                        @media (--min-tablet) {
                            width: calc(100% / 3);
                        }
                        &:nth-child(6n+1) {
                            background-color: var(--color2);
                        }
                        &:nth-child(6n+3) {
                            background-color: var(--color3);
                        }
                        &:nth-child(6n+5) {
                            background-color: var(--color1);
                        }
                    }
                    
                    &.withImage {
                        @media (min-width: 56em) {
                            width: calc(100% / 3 * 1.5);
                        }
                        @media (--min-fablet) {
                            width: calc(100% / 3 * 1.5);
                        }
                        @media (max-width: 56em) {
                            width: 50%;
                        }
                        @media (--max-fablet) {
                            width: 50%;
                        }
                        .media {
                            img {
                                aspect-ratio: 16/9;
                            }
                        }
                    }
                }
                
                .media {
                    height: 100%;
                }

                .inner {
                    padding: var(--padding);
                    .intro {
                        gap: 0;
                        .title {
                            font-family: var(--font-sub);
                            font-size: var(--s-fontsize);
                            font-weight: 400;
                        }
                    }
                }

                .splide__pagination {
                    width: 100vw;
                }
            }
        }
    }
}