@layer addon {
    .templateGallery {
        .splide {
            .splide__track {
                @media (max-width: 56em) {
                    padding-left: var(--gutter) !important;
                    padding-right: var(--gutter) !important;
                }
                @media (--max-fablet) {
                    padding-left: var(--gutter) !important;
                    padding-right: var(--gutter) !important;
                }
            }
        }
        .popup {
            width: 100%;
            .image &, .video & {
                overflow: hidden;
                img, video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .image & {
                border-top-left-radius: var(--section-radius);
                border-top-right-radius: var(--section-radius);
                pointer-events: none;
                &:before, &:after {
                    display: none;
                }
            }
            .video & {
                border-bottom-left-radius: var(--section-radius);
                border-bottom-right-radius: var(--section-radius);
                &:before {
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.0) 100%);
                    opacity: 1;
                }
                .icon {
                    opacity: 1;
                    width: 100px;
                    height: 100px;
                    font-size: var(--xl-fontsize);
                    background: var(--gradient);
                    bottom: var(--padding);
                    left: var(--padding);
                    top: unset;
                    transform: unset;
                }
                .text {
                    position: absolute;
                    bottom: var(--padding);
                    height: 100px;
                    z-index: 9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    left: calc(100px + var(--padding) + var(--gutter));
                    color: var(--color-light);
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                    font-weight: bold;
                    width: calc(100% - 100px - var(--padding) - var(--gutter) - var(--padding));
                }
                @media (max-width: 56em) {
                    height: 60vh;
                    .icon {
                        width: 60px;
                        height: 60px;
                    }
                    .text {
                        height: 60px;
                        line-height: 1;
                        left: calc(60px + var(--padding) + var(--gutter));
                    }
                }
                @media (--max-fablet) {
                    height: 60vh;
                    .icon {
                        width: 60px;
                        height: 60px;
                    }
                    .text {
                        height: 60px;
                        line-height: 1;
                        left: calc(60px + var(--padding) + var(--gutter));
                    }
                }
            }
        }
        .jobPosting & {
            .item {
                color: var(--color-light);
                
                border-top-left-radius: var(--section-radius);
                border-top-right-radius: var(--section-radius);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                overflow: hidden;
                @media (max-width: 56em) {
                    flex-direction: column;
                }
                @media (--max-fablet) {
                    flex-direction: column;
                }
                .media {
                    border-radius: 0;
                    @media (min-width: 56em) {
                        min-width: 300px;
                        max-width: 300px;
                        min-height: 260px;
                    }
                    @media (--min-fablet) {
                        min-width: 300px;
                        max-width: 300px;
                        min-height: 260px;
                    }
                }
                .inner {
                    padding: var(--padding);
                    background-color: var(--color1);
                    flex-grow: 1;
                    .header {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: var(--gutter);
                        .title {
                            font-size: var(--xl-fontsize);
                            color: var(--color3);
                        }
                        .subTitle {
                            font-size: var(--m-fontsize);
                            font-weight: bold;
                            color: var(--color-light);
                        }
                    }
                }
            }
        }

        &.video {
            .splide {
                grid-column: span 10;
            }
        }
    }
}