@layer addon {
    .templateGallery {
        .container {
            @media (max-width: 56em) {
                grid-column: full-start / full-end;
            }
            @media (--max-fablet) {
                grid-column: full-start / full-end;
            }
            .splide {
                max-width: initial;
            }
        }

        .intro {
            width: calc(100% / 12 * 8);
            margin: 0 auto;
            text-align: center;
            @media (max-width: 56em) {
                width: 100%;
            }
            @media (--max-fablet) {
                width: 100%;
            }
        }
        .content {
            @media (max-width: 56em) {
                width: 100%;
                text-align: left;
            }
            @media (--max-fablet) {
                width: 100%;
                text-align: left;
            }
        }
        .buttons {
            justify-content: center;
        }
        .popup {
            border-radius: var(--border-radius);
            overflow: hidden;
            &:before {
                background-color: var(--color1);
            }
        }
        .splide__list {
            width: 100%;
        }

        

        .grid {
            .item {
                .popup {
                    .icon {
                        background: var(--color2);
                    }
                }
            }


            .splide__pagination {
                margin: calc(var(--padding) * 0.8) auto 0 auto;
            }
            .splide__arrow {
                &.splide__arrow--prev {
                    left: calc(-32px - var(--gutter));
                }
                &.splide__arrow--next {
                    right: calc(-32px - var(--gutter));
                }
            }
            @media (max-width: 56em) {
                .splide__slide {
                    width: 40%;
                    &.is-active {
                        width: 65%;
                    }
                }
            }
            @media (--max-fablet) {
                .splide__slide {
                    width: 40%;
                    &.is-active {
                        width: 65%;
                    }
                }
            }
        }

        &.image {
            .splide__slide {
                width: calc(100% / 3 - var(--gutter));
                @media (max-width: 56em) {
                    width: calc(100% - var(--gutter));
                }
                @media (--max-fablet) {
                    width: calc(100% - var(--gutter));
                }
                img {
                    aspect-ratio: 16 / 9;
                }
            }
            .splide__track {
                position: initial;
            }
        }

        &.video {
            .splide__slide {
                justify-content: center;
                align-items: center;
                display: flex;
                width: calc(25% - 64px);
                opacity: 0;
                &.is-active {
                    width: calc(50% - 64px);
                    opacity: 1;
                }
                &.is-visible,
                &.is-prev,
                &.is-next {
                    opacity: 1;
                }
                
                img {
                    transition: opacity 1s ease-in-out;	
                    border-radius: var(--border-radius);
                    overflow: hidden;
                    height: auto;
                    aspect-ratio: 16 / 9;
                }
            }
            .splide__arrow {
                &.splide__arrow--prev {
                    left: calc(25% - 16px);
                }
                &.splide__arrow--next {
                    right: calc(25% - 16px);
                }
            }
        }


        &.themeColor1 {
            .splide__arrow {
                background-color: rgba(var(--color-dark-transparency), 0.1);
                color: var(--color-dark);
                &:hover {
                    @media (hover: hover) {
                        background: var(--color-dark);
                        color: var(--color-light);
                    }
                }
            }
        }


        &.portrait {
            .splide {
                grid-column: 2 / span 10;
                @media (max-width: 56em) {
                    grid-column: span 12;
                }
                @media (--max-fablet) {
                    grid-column: span 12;
                }
                .splide__slide {
                    a {
                        max-height: 65vh;
                        width: auto;
                        img {
                            height: 100%;
                            aspect-ratio: 9 / 16;
                        }
                    }
                }
            }
            .splide__arrow {
                &.splide__arrow--prev {
                    left: calc(25% + 16px);
                }
                &.splide__arrow--next {
                    right: calc(25% + 16px);
                }
            }
        }
    }
}