@layer addon {
    .templateGallery {
        .container {
            grid-column: full-start / full-end;
            .inner {
                @media (min-width: 56em) {
                    padding: 0 var(--spacer);
                }
                @media (--min-fablet) {
                    padding: 0 var(--spacer);
                }
                @media (max-width: 56em) {
                    row-gap: calc(var(--gutter) / 2);
                }
                @media (--max-fablet) {
                    row-gap: calc(var(--gutter) / 2);
                }
                flex-direction: row;
                flex-wrap: wrap;
                column-gap: 0;
                justify-content: space-between;
            }
        }
        .intro {
            order: 1;
            @media (min-width: 56em) {
                width: calc(100% / 12 * 7);
            }
            @media (--min-fablet) {
                width: calc(100% / 12 * 7);
            }
            @media (max-width: 56em) {
                max-width: 100vw;
                padding: 0 var(--spacer);
            }
            @media (--max-fablet) {
                max-width: 100vw;
                padding: 0 var(--spacer);
            }
        }
        @media (max-width: 56em) {
            .buttons {
                padding: 0 var(--spacer);
            }
        }
        @media (--max-fablet) {
            .buttons {
                padding: 0 var(--spacer);
            }
        }
        .actionElements {
            order: 2;
            height: fit-content;
            align-self: flex-end;
            @media (max-width: 56em) {
                width: 100%;
                .splide {
                    max-width: 100vw;
                }
            }
            @media (--max-fablet) {
                width: 100%;
                .splide {
                    max-width: 100vw;
                }
            }
            .item {
                padding: calc(var(--padding) / 2);
                border-radius: var(--border-radius);
                
                width: 156px;
                height: 156px;
                font-size: var(--xs-fontsize);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                background: var(--color1);
                position: relative;

                .title {
                    font-size: var(--xs-fontsize);
                    line-height: var(--xs-lineheight);
                    font-family: var(--font-basic);
                    font-weight: 400;
                }
                .background {display: none;}

                
                &:has(.button) {
                    padding: calc(var(--padding) * 2);
                    width: 75% !important;
                    margin-left: auto;
                    height: auto;
                    aspect-ratio: auto;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    text-align: left;
                    background: var(--color3);
                    @media (max-width: 56em) {
                        padding: var(--padding);
                        width: 100% !important;
                    }
                    @media (--max-fablet) {
                        padding: var(--padding);
                        width: 100% !important;
                    }
                    .title {
                        color: var(--color-light);
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                        font-family: var(--font-basic);
                        font-weight: 400;
                        margin-bottom: var(--padding);
                        display: block;
                    }
                    .button {
                        z-index: 1;
                        &.outline {
                            box-shadow: inset 0 0 0 1px var(--color-light);
                            color: var(--color-light);
                        }
                    }
                    .background {
                        position: absolute;
                        right: var(--min-padding);
                        bottom: 0;
                        height: 100%;
                        width: auto;
                        display: block;
                        z-index: 0;
                        svg {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
            }
        }
        .grid {
            order: 4;
            .splide {
                max-width: calc(100vw + var(--gutter) + var(--gutter));
                margin-right: calc(var(--spacer) * -1);
                margin-left: calc(var(--spacer) * -1);
                
                @media (max-width: 56em) {
                    margin-left: 0;
                    margin-right: 0;
                    max-width: 100vw;
                }
                
                @media (--max-fablet) {
                    margin-left: 0;
                    margin-right: 0;
                    max-width: 100vw;
                }
            }
            .item {
                overflow: hidden;
                border-radius: var(--border-radius);
                width: calc(33.3333% - 10.6667px);
                @media (max-width: 56em) {
                    width: calc(100% - 10.6667px);
                }
                @media (--max-fablet) {
                    width: calc(100% - 10.6667px);
                }
                img {aspect-ratio: 1;}
                .icon {
                    opacity: 1;
                    left: auto;
                    top: auto;
                    bottom: var(--padding);
                    right: var(--padding);
                    transform: none;
                    border-radius: 100%;
                    width: 32px;
                    height: 32px;
                    display: block;
                    padding: 0;
                    border: 1px solid var(--color-light);
                    -webkit-backdrop-filter: blur(60px);
                            backdrop-filter: blur(60px);
                    background: rgba(255, 255, 255, 0.29);
                }

                &.videoItem {
                    
                    img {aspect-ratio: 2 / 1;}
                    @media (min-width: 56em) {
                        width: calc(50% - 10.6667px);
                    }
                    @media (--min-fablet) {
                        width: calc(50% - 10.6667px);
                    }
                    .icon {
                        left: 50%;
                        transform: translateY(-50%) translateX(-50%);
                        top: 50%;
                        bottom: auto;
                        right: auto;
                        width: 64px;
                        height: 64px;
                        padding: 12px;
                        @media (max-width: 56em) {
                            width: 32px;
                            height: 32px;
                            padding: 6px;
                        }
                        @media (--max-fablet) {
                            width: 32px;
                            height: 32px;
                            padding: 6px;
                        }
                    }
                }
                
                &:hover {
                    @media (hover: hover) {
                        .icon {
                            background-color: var(--color-light);
                            color: var(--color-dark);
                        }
                    }
                }

            }
        }

        
        .splide__pagination {
            gap: 8px;

            li {
                list-style: none;
            }
            .splide__pagination__page {
                display: block;
                border-radius: 6px;
                width: 6px;
                height: 6px;
                transform: none;
                margin: 0;
                background: var(--color-dark);
                opacity: 0.15;
                transition: var(--transition);
                
                .themeColor3 & {
                    background: var(--color-light);
                }

                &.is-active {
                    width: 48px;
                    opacity: 1;
                }
            }

        }
        .intro + .actionElements {
            .buttons {
                width: calc(100% / 12 * 6);
            }
        }
        
        .buttons {
            order: 3;
            align-self: flex-end;
        }
    }
}