@layer addon {
    .templateBlocks {
        .splide__list {
            width: 100%;
        }
        .splide__slide {
            .block {
                .title {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                }
                .themeColor2 &, .themeColor3 &, .image & {
                    padding-right: var(--padding);
                    .inner {
                        padding: 0;
                    }
                }

                .themeColor2 &, .themeColor3 & {
                    .content & {
                        border-radius: 0;
                    }
                }

            }
        }
        &.image {
            .inner {
                .intro {
                    grid-column: span 4;
                }
                .buttons {
                    grid-column: span 4;
                }
                .grid {
                    grid-row: span 3;
                    grid-column: 6 / span 7;
                    .block {
                        gap: var(--padding);
                        border-radius: 0;
                        @media (min-width: 56em) {
                            align-items: center;
                        }
                        @media (--min-fablet) {
                            align-items: center;
                        }
                        .media {
                            order: 2;
                            border-radius: var(--border-radius);
                            height: fit-content;
                            img {
                                aspect-ratio: 1;
                            }
                        }
                        .inner {
                            display: flex;
                            justify-content: center;
                            align-items: flex-start;
                            .intro {
                                grid-column: span 12;
                                display: flex;
                                flex-direction: column;
                                padding: 0;
                                .title {
                                    order: 2;
                                }
                                .subTitle {
                                    order: 1;
                                    background-color: var(--color2);
                                    border-radius: var(--border-radius);
                                    width: fit-content;
                                    text-transform: uppercase;
                                    font-size: var(--fontsize);
                                    line-height: 1;
                                    padding: 8px 16px;
                                    font-weight: 900;
                                    margin-top: 0;
                                    margin-bottom: var(--padding);
                                }
                                .content {
                                    order: 3;
                                    margin-top: var(--gutter);
                                    font-size: var(--xs-fontsize);
                                }
                            }
                        }
                        .themeColor1 & {
                            background: var(--gradient);
                            border-radius: var(--border-radius);
                            padding: var(--padding);
                            .title, .content {
                                color: #fff;
                            }
                            .media {
                                border-radius: calc(var(--border-radius) / 2);
                            }
                            .content {
                                a {
                                    text-decoration-color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            @media (min-width: 56em) {
                .inner {
                    grid-template-columns: repeat(12, 1fr);
                    display: grid;
                    gap: var(--gutter);
                    align-items: center;
                    .block {
                        flex-direction: row;
                        .media {
                            width: 40%;
                        }
                        .inner {
                            width: 60%;
                        }
                    }
                }
            }
            @media (--min-fablet) {
                .inner {
                    grid-template-columns: repeat(12, 1fr);
                    display: grid;
                    gap: var(--gutter);
                    align-items: center;
                    .block {
                        flex-direction: row;
                        .media {
                            width: 40%;
                        }
                        .inner {
                            width: 60%;
                        }
                    }
                }
            }
            .splide__track {
                .splide__arrows {
                    display: flex;
                    flex-direction: row;
                    gap: calc(var(--gutter) / 2);
                    width: fit-content;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    .splide__arrow {
                        position: relative;
                        top: unset;
                        transform: unset;
                        left: unset;
                        right: unset;
                    }
                }
                .jobPosting & {
                    @media (min-width: 56em) {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        column-gap: var(--gutter);
                    }
                    @media (--min-fablet) {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        column-gap: var(--gutter);
                    }
                    .splide__arrows {
                        position: relative;
                        order: 3;
                    }
                    .splide__pagination {
                        order: 2;
                        margin-top: unset;
                        @media (max-width: 56em) {
                            margin: calc(var(--padding) * 0.8) auto 0 auto;
                        }
                        @media (--max-fablet) {
                            margin: calc(var(--padding) * 0.8) auto 0 auto;
                        }
                    }
                }
            }
        }
        &.video {

            .intro {
                text-align: center;
            }
            .splide__slide {
                width: calc(25% - 64px) !important;
                @media (max-width: 56em) {
                    width: calc(100% - 16px) !important;
                }
                @media (--max-fablet) {
                    width: calc(100% - 16px) !important;
                }
                    

                .inner {display: none;}
                .media {
                    border-radius: var(--border-radius);
                    opacity: 0.5;
                    .playButton {display: none;}
                }
                &.is-active {
                    width: calc(50% - 64px) !important;
                    @media (max-width: 56em) {
                        width: calc(100% - 16px) !important;
                    }
                    @media (--max-fablet) {
                        width: calc(100% - 16px) !important;
                    }
                    .inner {display: block;pointer-events: none;}
                    .media {
                        opacity: 1;
                        .playButton {display: flex;}
                    }
                }
                article {
                    align-items: center;

                    .block {
                        background: none;
                        padding: 0;
                        .media {
                            height: 100%;
                            &:before {
                                content: "";
                                position: absolute;
                                z-index: 99;
                                width: 100%;
                                height: 100%;
                                background: linear-gradient(180deg, rgba(19, 26, 35, 0.2) 0%, rgba(19, 26, 35, 0.9) 100%);
                            }
                            video {
                                aspect-ratio: 16 / 9;
                                position: relative;
                            }
                            .playButton {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translateX(-50%) translateY(-50%);
                                z-index: 100;
                                .text {display: none;}
                            }
                        }
                        .inner {
                            position: absolute;
                            z-index: 100;
                            left: 0;
                            width: 100%;
                            bottom: 0;
                            text-align: center;
                            padding: calc(var(--padding) / 2);
                            .title {font-size: var(--fontsize);}
                            .subTitle {font-size: var(--fontsize);margin-top: 0;color: var(--color-light);}
                            .content {
                                margin-top: calc(var(--padding) / 2);
                            }
                        }
                    }
                }
            }
            .splide__pagination {
                margin: calc(var(--padding) * 0.8) auto 0 auto;
            }
            .splide__arrow--prev {
                margin-top: calc(calc(var(--padding) * 0.4) * -1);
                left: calc(25% - 16px);
            }
            .splide__arrow--next {
                margin-top: calc(calc(var(--padding) * 0.4) * -1);
                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 {
                        article {
                            .block {
                                aspect-ratio: 9 / 16;
                                max-height: 65vh;
                                width: auto;
                                video, img {
                                    height: 100%;
                                    aspect-ratio: 9 / 16;
                                }
                            }
                        }
                    }
                }
                .splide__arrow {
                    &.splide__arrow--prev {
                        left: calc(25% + 16px);
                    }
                    &.splide__arrow--next {
                        right: calc(25% + 16px);
                    }
                }
            }
        }
    }
}