@layer addon {
    .templateGallery {

        .container {
            @media (max-width: 56em) {
                grid-column: full-start / full-end;
            }
            @media (--max-fablet) {
                grid-column: full-start / full-end;
            }
        }
        
        .intro {
            text-align: center;
            padding: 0 var(--spacer);
            @media (min-width: 56em) {
                padding:initial;
                width: calc(100% / 12 * 8);
                margin: 0 auto;
            }
            @media (--min-fablet) {
                padding:initial;
                width: calc(100% / 12 * 8);
                margin: 0 auto;
            }
        }
        .content {
            text-align: center;
            margin: 0 auto;
            @media (min-width: 56em) {
                width: 75%;
            }
            @media (--min-fablet) {
                width: 75%;
            }
            @media (max-width: 56em) {
                padding: 0 var(--padding);
            }
            @media (--max-fablet) {
                padding: 0 var(--padding);
            }
        }
        .buttons {
            justify-content: center;
            @media (max-width: 56em) {
                padding: 0 calc(var(--spacer) + var(--padding));
            }
            @media (--max-fablet) {
                padding: 0 calc(var(--spacer) + var(--padding));
            }
        }
        .grid {

            .splide {
                @media (max-width: 56em) {
                    max-width: 100vw;
                }
                @media (--max-fablet) {
                    max-width: 100vw;
                }
            }


            .splide__slide {
                width: 20%;
                justify-content: center;
                align-items: center;
                display: flex;
                @media (max-width: 56em) {
                    width: 30%;
                }
                @media (--max-fablet) {
                    width: 30%;
                }
                img {
                    transition: opacity 1s ease-in-out;	
                    opacity: 0.6;
                    height: auto;
                }
                .popup {
                    .icon {
                        background: none;
                        color: var(--color2);
                        opacity: 0;
                    }
                    &:after {
                        position: absolute;
                        z-index: 2;
                        top: 50%;
                        left: 50%;
                        transform: translateY(-50%) translateX(-50%);
                        margin-left: -60px;
                        margin-top: -60px;
                        width: 120px;
                        height: 120px;
                        opacity: 0;
                        display: block;
                        content: "";
                        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFB00' d='M52.0644 9.74805L50.1253 9.57657L50.9695 0L55.6391 0.408917C57.4594 0.567208 58.7389 2.05778 58.5807 3.81216C58.4092 5.76441 56.8527 6.80649 55.0851 6.6482L52.3546 6.41076L52.0644 9.74805ZM52.7371 2.03139L52.5129 4.52447L55.2302 4.7619C56.0348 4.82786 56.5493 4.32661 56.6152 3.62749C56.668 3.04709 56.2063 2.33478 55.4544 2.26883L52.7371 2.03139ZM63.303 1.88629L61.1397 9.29957L65.1761 10.4736L64.6485 12.2807L58.7389 10.5527L61.4299 1.33228L63.303 1.8731V1.88629ZM73.394 16.8184L71.5209 15.8159L71.7451 13.5734L68.21 11.6871L66.4688 13.1249L64.6089 12.1356L72.7213 5.57974L74.3042 6.42395L73.394 16.8184ZM72.2332 8.36301L69.5687 10.5527L71.9034 11.7926L72.2332 8.36301ZM85.279 14.4044L78.6835 16.5545L76.296 19.4829L74.779 18.2562L77.1666 15.3278L77.9449 8.44216L79.752 9.90635L79.0529 14.5627L83.4982 12.9666L85.279 14.4176V14.4044ZM93.9058 25.9069L84.0127 28.4527L82.6804 26.5005L88.6427 18.2166L89.8298 19.9578L85.3449 26.1047L92.6791 24.1393L93.8926 25.9069H93.9058ZM86.0177 32.0406L94.6973 27.9383L95.5547 29.7586L86.8751 33.861L86.0177 32.0406ZM87.627 35.1932L96.8738 32.6078L97.8763 36.1826C98.6413 38.9131 97.2299 41.6172 94.6181 42.3559C92.0063 43.0814 89.3945 41.4985 88.6295 38.768L87.627 35.1932ZM89.9617 36.5651L90.4366 38.2667C90.9379 40.0343 92.5867 40.8917 94.0905 40.4696C95.6074 40.0475 96.5704 38.4646 96.0691 36.697L95.5942 34.9954L89.9617 36.5651ZM89.9749 44.7039L99.5515 44.1762L99.9077 50.7453L98.0346 50.8508L97.7839 46.2208L95.7262 46.3395L95.9504 50.4551L94.262 50.5474L94.0377 46.4319L91.9536 46.5506L92.2174 51.3125L90.3443 51.418L89.9749 44.7171V44.7039ZM93.4441 62.9337C90.6609 62.4456 88.8273 59.8074 89.3154 57.0373C89.8035 54.2804 92.4021 52.4469 95.1853 52.935C97.9554 53.423 99.8021 56.048 99.3141 58.8181C98.8392 61.575 96.2274 63.4217 93.4441 62.9337ZM93.7871 60.9682C95.5679 61.2848 97.2299 60.124 97.5069 58.4883C97.7971 56.8527 96.6231 55.217 94.8424 54.9004C93.0616 54.5838 91.4127 55.7446 91.1357 57.3803C90.8455 59.0292 92.0063 60.6648 93.7871 60.9814V60.9682ZM83.8676 71.6528L84.9756 70.0567L92.8769 75.5573L90.1992 79.4091C89.1571 80.9128 87.2312 81.2822 85.7802 80.2665C84.171 79.1452 84.039 77.2721 85.0547 75.8211L86.6245 73.5655L83.8676 71.6528ZM90.2124 76.0718L88.1546 74.6471L86.5981 76.8896C86.1364 77.5491 86.3211 78.2615 86.9015 78.6572C87.3763 78.9869 88.2206 78.9474 88.6558 78.3274L90.2124 76.085V76.0718ZM85.0679 85.3186L79.7124 79.752L76.6917 82.6672L75.3858 81.3085L79.818 77.0347L86.4793 83.9467L85.0811 85.3054L85.0679 85.3186ZM67.1547 86.6772L68.9487 85.5428L70.7954 86.8487L74.1855 84.6986L73.8029 82.4693L75.5837 81.3481L77.2721 91.637L75.7552 92.5999L67.1547 86.6772ZM75.0824 89.843L74.4889 86.4398L72.2596 87.8512L75.0824 89.8298V89.843ZM63.3689 98.2192L64.7672 91.4259L63.3953 87.8908L65.2157 87.1917L66.5875 90.7268L72.1936 94.816L70.0303 95.6602L66.3369 92.745L65.5322 97.4014L63.3953 98.2324L63.3689 98.2192ZM49.1096 100L51.8006 90.1464L54.1617 89.9486L58.4092 99.2349L56.2986 99.4064L53.1856 92.468L51.2597 99.8153L49.1228 99.9868L49.1096 100ZM47.6454 90.1068L46.8935 99.6702L44.8885 99.5119L45.6404 89.9486L47.6454 90.1068ZM44.1235 89.9486L41.8019 99.2613L38.2008 98.3643C35.4439 97.6784 33.795 95.1194 34.4414 92.4812C35.1009 89.843 37.7655 88.3656 40.5224 89.0516L44.1235 89.9486ZM41.7887 91.294L40.0739 90.8719C38.2931 90.4234 36.7366 91.4523 36.354 92.9561C35.9715 94.4862 36.8817 96.0955 38.6624 96.544L40.3773 96.9661L41.7887 91.294ZM34.692 87.284L30.405 95.8713L24.5218 92.9297L25.366 91.2545L29.508 93.3254L30.4313 91.4787L26.7511 89.632L27.5162 88.115L31.1964 89.9617L32.133 88.1018L27.8723 85.9649L28.7165 84.2897L34.7184 87.2972L34.692 87.284ZM17.1613 81.2426C18.9685 79.0661 22.1607 78.7891 24.324 80.5962C26.4741 82.3902 26.7643 85.556 24.9571 87.7325C23.1632 89.8958 19.9578 90.186 17.8077 88.392C15.6576 86.5981 15.3542 83.4191 17.1613 81.2426ZM18.6915 82.5221C17.5307 83.9203 17.7153 85.9253 18.9949 86.9938C20.2744 88.0491 22.2794 87.8512 23.4402 86.4662C24.601 85.0679 24.4163 83.0761 23.1368 82.0208C21.8573 80.9524 19.8523 81.1371 18.6915 82.5353V82.5221ZM14.3121 68.6057L15.1563 70.3601L6.47672 74.5021L4.45851 70.2678C3.66706 68.6189 4.30022 66.7722 5.89632 66.0071C7.6639 65.1629 9.35233 65.9808 10.1174 67.5768L11.3046 70.0567L14.3253 68.6057H14.3121ZM7.32093 71.9298L9.57657 70.8482L8.40259 68.3815C8.05962 67.656 7.34732 67.4713 6.71415 67.7615C6.18652 68.0121 5.80398 68.764 6.13376 69.4631L7.30774 71.9298H7.32093ZM1.84672 62.9073L9.32595 61.0078L8.29706 56.9318L10.1174 56.4701L11.6343 62.4324L2.33478 64.7936L1.85991 62.9073H1.84672ZM9.55019 46.6693L9.64253 48.793L7.59794 49.7428L7.78261 53.7528L9.90634 54.5179L9.99868 56.6152L0.224245 52.9745L0.1451 51.1806L9.56338 46.6561L9.55019 46.6693ZM2.86242 51.972L6.10737 53.146L5.98866 50.5079L2.86242 51.972ZM1.38504 37.7127L6.60863 42.2768L10.3548 42.8308L10.0646 44.7566L6.31843 44.2026L0 47.0518L0.342963 44.7566L4.69595 42.9759L1.04208 39.9815L1.37185 37.7127H1.38504ZM6.91202 24.3635L14.1274 31.5789L13.1249 33.7159L2.95476 32.7925L3.85173 30.8798L11.4233 31.6053L6.00185 26.2894L6.91202 24.3503V24.3635ZM16.2116 28.0306L8.27068 22.6223L9.40509 20.9471L17.346 26.3554L16.2116 28.0306ZM18.1111 25.0363L11.1727 18.4013L13.7449 15.7103C15.7103 13.6526 18.7574 13.4943 20.7229 15.3674C22.6883 17.2405 22.6487 20.3008 20.6965 22.3453L18.1243 25.0363H18.1111ZM18.0979 22.3321L19.3246 21.0526C20.591 19.7204 20.4854 17.8604 19.351 16.792C18.2166 15.7103 16.3567 15.6839 15.0904 17.0162L13.8636 18.2957L18.0847 22.3321H18.0979ZM25.0758 18.177L19.7335 10.2097L25.1946 6.54267L26.2366 8.0992L22.3849 10.6846L23.5325 12.3994L26.949 10.1042L27.8987 11.5156L24.4823 13.8108L25.6431 15.5388L29.6003 12.8743L30.6424 14.4308L25.0627 18.177H25.0758ZM39.0054 5.90951C40.0079 8.54768 38.6624 11.4629 36.0375 12.4654C33.4257 13.4547 30.5105 12.1356 29.5212 9.49743C28.5319 6.87244 29.8509 3.94407 32.4759 2.95476C35.0877 1.96544 38.0161 3.27134 39.0054 5.9227V5.90951ZM37.1455 6.60863C36.5123 4.9202 34.6788 4.07598 33.1091 4.66957C31.5658 5.24997 30.7347 7.09669 31.3811 8.78512C32.0142 10.4736 33.8478 11.3046 35.4043 10.7242C36.9608 10.1306 37.7918 8.31025 37.1587 6.60863H37.1455Z'/%3E%3C/svg%3E");
                        
                        background-size: 80% auto;
                        background-repeat: no-repeat;
                        background-position: center;
                
                        animation-name: spin;
                        animation-duration: 10s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                        transition: var(--transition);
                    }

                    &:hover {
                        .icon {
                            background-color: var(--color1);
                        }
                    }
                }
                &.is-active {
                    width: 50%;
                    @media (max-width: 56em) {
                        width: 70%;
                    }
                    @media (--max-fablet) {
                        width: 70%;
                    }
                    img {opacity: 1;}
                    .icon {
                        opacity: 1;
                    }
                    .popup {&:after {opacity: 1;}
                    }
                }
                &.is-prev,
                &.is-next {
                    pointer-events: none;
                }
                .popup {
                    border-radius: var(--border-radius);
                    overflow: hidden;
                    &:before {
                        background-color: #000;
                        opacity: 0.2;
                    }
                    
                }
            }

            .splide__arrows {
                @media (max-width: 56em) {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-top: var(--padding);
                    gap: calc(var(--padding) / 2);
                }
                @media (--max-fablet) {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-top: var(--padding);
                    gap: calc(var(--padding) / 2);
                }
            }

            .splide__arrow {
                display: flex;
                background: none;
                border: 2px solid var(--color2);
                color: var(--color2);
                width: 32px;
                height: 32px;

                @media (max-width: 56em) {
                    position: relative;
                    left: auto;
                    right: auto;
                    top: auto;
                    transform: none;
                }

                @media (--max-fablet) {
                    position: relative;
                    left: auto;
                    right: auto;
                    top: auto;
                    transform: none;
                }

                &.splide__arrow--prev {
                    @media (min-width: 56em) {
                        left: calc(20% + 16px);
                    }
                    @media (--min-fablet) {
                        left: calc(20% + 16px);
                    }
                }
                &.splide__arrow--next {
                    @media (min-width: 56em) {
                        right: calc(20% + 16px);
                    }
                    @media (--min-fablet) {
                        right: calc(20% + 16px);
                    }
                }
                &:hover {
                    @media (hover: hover) {
                        background: var(--color2);
                        color: var(--color1);

                    }
                }
            }
        }
    }
}