@layer addon {

    /* Ensure Splide items are shown in a horizontal row and scrollable */
    .templateBlocks.video .splide__track {
        width: 100%;
        overflow: visible;
    }

    .templateBlocks.video {
        overflow: hidden;
        .container {
            .inner {
                .intro {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .title {
                        display: none;
                    }
                    .title + .content {
                        margin-top: 0;
                    }
                    .media {
                        margin-bottom: var(--gutter);
                        svg {
                            height: auto;
                            @media (max-width: 56em) {
                                width: 100%;
                            }
                            @media (--max-fablet) {
                                width: 100%;
                            }
                        }
                    }
                }
                @media (max-width: 56em) {
                    .intro {
                        min-width: 65%;
                    }
                }
                @media (--max-fablet) {
                    .intro {
                        min-width: 65%;
                    }
                }
                @media (min-width: 56em) {
                    grid-column: span 12;
                    .intro {
                        justify-content: center;
                    }
                }
                @media (--min-fablet) {
                    grid-column: span 12;
                    .intro {
                        justify-content: center;
                    }
                }
            }
            .grid {
                @media (max-width: 56em) {
                    .intro.splide__slide.item {
                        width: 80%!important;
                    }
                }
                @media (--max-fablet) {
                    .intro.splide__slide.item {
                        width: 80%!important;
                    }
                }
                @media (min-width: 56em) {
                    .splide__pagination {
                        display: none;
                    }
                }
                @media (--min-fablet) {
                    .splide__pagination {
                        display: none;
                    }
                }
                .block {
                    .media {
                        .playButton {
                            top: unset;
                            left: unset;
                            transform: unset;
                            bottom: var(--padding);
                            right: var(--padding);
                            width: auto;
                            height: auto;

                            background-color: var(--color3);
                            color: var(--color1);
                            border-radius: var(--border-radius);
                            display: flex;
                            flex-direction: row-reverse;
                            align-items: center;
                            justify-content: center;
                            transition: var(--transition);
                            padding-left: 0;
                            .icon {
                                background: none;
                                position: relative;
                                &.video-close {
                                    display: none;
                                    padding: 15px;
                                }
                            }
                            .text {
                                display: none;
                                transition: var(--transition);
                                text-transform: uppercase;
                                font-size: var(--xs-fontsize);
                            }
                            &:after {
                                background: none;
                                width: 50px;
                                height: 50px;
                                border: 2px solid var(--color3);
                                animation: playPulse 2s infinite;
                                border-radius: 150px;
                                top: unset;
                                margin-top: unset;
                            }
                        }
                        &.playing {
                            .playButton {
                                &:after {
                                    display: none;
                                }
                                .icon {
                                    &.video-play {display: none;}
                                    &.video-close {display: block;}
                                }
                            }                                
                        }
                    }    
                    .inner {
                        display: flex;
                        opacity: 0;
                        position: absolute;
                        bottom: calc(var(--section) / 2);
                        right: var(--padding);
                        background-color: var(--color2);
                        border-radius: var(--border-radius);
                        padding: calc(var(--padding) / 2) var(--padding);
                        max-width: calc(100% - calc(var(--gutter) * 2));
                        transition: var(--transition);
                        left: 0; 
                        right: 0; 
                        margin-inline: auto; 
                        width: fit-content;
                        &:before {
                            content: "";
                            background-image: url("data:image/svg+xml,%3Csvg width='33' height='28' viewBox='0 0 33 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.627959 2.35772L0.500122 28L32.5001 28C21.3492 14.6164 9.379 4.10566 4.55605 1.38856C1.90633 -0.099791 0.627959 1.42894 0.627959 2.35772Z' fill='%23E0FF00'/%3E%3C/svg%3E%0A");
                            position: absolute;
                            top: -28px;
                            right: calc(50% - calc(var(--padding) / 2));
                            width: 33px;
                            height: 28px;
                        }
                        .intro {
                            width: 100%;
                            .content {
                                color: var(--color1);
                                font-size: var(--s-fontsize);
                                line-height: var(--s-lineheight);
                                font-family: var(--font-subNarrow);
                                letter-spacing: .22px;
                                p {
                                    &:before,
                                    &:after {
                                        font-size: var(--m-fontsize);
                                        line-height: 1;
                                        position: relative;
                                        top: 0.25rem;
                                    }
                                    &:before {
                                        content: open-quote;
                                    }
                                    &:after {
                                        content: close-quote;
                                    }
                                }
                            }
                        }
                    }   

                    &:hover {
                        @media (hover: hover) {
                            .inner {
                                opacity: 1;
                                bottom: calc(var(--section) * 1.2);
                            }
                            .playButton {
                                padding-left: var(--padding);
                                &:after {
                                    display: none;
                                }
                                .text {
                                    display: flex;
                                }
                            }
                        }
                    }             
                }
            }
        }
    }
}

@keyframes playPulse {
    0% {
        opacity: 1;
        scale: 1;
    }
    50% {
        opacity: 0;
        scale: 1.2;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}