/* video stories */
:root {
    --side-padding: 25px;
    --vertical-padding: 40px;
    --font-size-heading-h1-bigger: clamp(2.25rem, -1.01rem + 5.323vw, 4.313rem);
    /* 36 > 69, 980 > 1600 */
    --font-size-heading-h1: clamp(2rem, -1.161rem + 5.161vw, 4rem);
    /* 32 > 64, 980 > 1600 */
    --font-size-heading-h2: clamp(1.5rem, -0.081rem + 2.581vw, 2.5rem);
    /* 24 > 40, 980 > 1600 */
    --font-size-heading-h3: clamp(1.313rem, 0.226rem + 1.774vw, 2rem);
    /* 21 > 32, 980 > 1600 */
    --font-size-heading-h4: clamp(1.125rem, 0.532rem + 0.968vw, 1.5rem);
    /* 18 > 24, 980 > 1600 */
    --font-size-heading-h5: clamp(1rem, 0.605rem + 0.645vw, 1.25rem);
    /* 16 > 20, 980 > 1600 */
    --font-size-heading-h6: clamp(0.875rem, 0.48rem + 0.645vw, 1.125rem);
}

@media only screen and (min-width: 980px) {
    :root {
        --side-padding: clamp(2rem, -15rem + 21.25vw, 6.25rem);
        --vertical-padding: clamp(2.813rem, -1.848rem + 7.609vw, 5rem);

    }
}

#app .video-stories-section-v1 {
    --side-padding: 25px;
    --vertical-padding: 40px;
    padding-bottom: clamp(2.5rem, -1.452rem + 6.452vw, 5rem);
    padding-inline: 20px;
    padding-top: 20px;
    background-color: var(--section-bg-color, #FFF);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    @media only screen and (min-width: 980px) {
        --side-padding: clamp(2rem, -15rem + 21.25vw, 6.25rem);
        --vertical-padding: clamp(2.813rem, -1.848rem + 7.609vw, 5rem);
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .see-all-container.see-all-top {
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        padding-inline: var(--side-padding);
        padding-block: clamp(2.5rem, -3.5rem + 16vw, 12.5rem);
        background: var(--image-overlay-background-color, var(--primary-color));
        color: var(--top-heading-color, var(--primary-color-contrast));
        min-height: 500px;
        border-radius: 8px;

        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.35;
            border-radius: 8px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .header-slot-container {
        flex-direction: column;
        text-transform: none;
        text-align: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 50px;
        max-width: 1200px;
        margin-bottom: 0;

        &::before,
        &::after {
            display: none;
        }

        .header-top {
            font-size: 16px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .header-bottom {
            margin-bottom: 30px;
            line-height: 1.1;
            color: var(--top-main-heading-color, var(--primary-color-contrast));
            text-transform: uppercase;
            margin-top: 15px;
        }

        .intro {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            box-sizing: border-box;

            & p {
                font-size: clamp(1.125rem, -0.165rem + 1.613vw, 1.75rem);
                line-height: 1.3;
                font-weight: 400;

                span {
                    white-space: normal !important;
                }
            }
        }
    }

    .videos-section-wrapper {
        padding-inline: var(--side-padding);
    }

    #slider-story {
        --columns: 1;
        --gap: 20px;
        overflow: visible;
        margin-top: -150px;
        z-index: 2;
        isolation: isolate;
        position: relative;
        box-sizing: border-box;

        @media only screen and (min-width: 600px) {
            --columns: 2;
        }

        @media only screen and (min-width: 960px) {
            --columns: 3;
        }

        @media only screen and (min-width: 1280px) {
            --columns: 4;
        }

        .video-stories-slides {

            &>div {
                overflow: hidden;
                border-radius: 24px;
                box-shadow: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);
                transition: all .35s ease-in-out;
                position: relative;
                isolation: isolate;
                min-height: 26.563vw;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                background-color: #000;

                & a {
                    text-decoration: none;
                }

                &:hover {
                    box-shadow: 0px 12px 74px -12px rgba(0, 0, 0, 0.5);
                    position: relative;

                    .video-image img {
                        transform: scale(1.1);
                        opacity: 0.8;
                    }

                    .content:after {
                        opacity: 0.7;
                    }
                }

            }

            .video-image {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                z-index: -1;
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;

                & img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    object-position: top center;
                    display: block;
                    transition: transform .35s ease-in-out;
                }
            }

            .content {
                height: 100%;
                padding-top: calc(26.563vw/2 + 60px);
                padding-inline: 30px;
                padding-bottom: 30px;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20%, #000 100%);
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                color: var(--item-text-color, #FFF);

                @media only screen and (max-width: 1279px) {
                    min-height: 445px;
                }

                @media only screen and (max-width: 760px) {
                    padding-top: 264px;
                }
            }

            .video-title {
                font-size: var(--font-size-heading-h3);
                line-height: 1.1;
                margin-bottom: 15px;
                font-weight: 700;
            }

            .video-text {
                & p {
                    font-size: 16px;
                    line-height: 1.3;
                    font-weight: 400;

                    span {
                        white-space: normal !important;
                    }
                }
            }

            .video-link a {
                position: absolute;
                inset: 0;
                z-index: 1;
                font-size: 0;
                overflow: hidden;
                text-indent: -999px;
            }
        }

        &:not(.swiper-initialized) {

            .video-stories-slides {
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
            }

            .video-stories-slides>div {
                width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));

                &:hover {
                    z-index: 2;
                }
            }

            .arrows-buttons {
                display: none;
            }
        }

        &.swiper-initialized {
            width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
            margin-inline: auto;

            .swiper-slide {
                position: relative;
                transform: scale(0.8) translateX(170px);
                z-index: 0;

                cursor: grab;

                &:active {
                    cursor: grabbing;
                }

                &::after {
                    position: absolute;
                    inset: 0;
                    z-index: 3;
                    background-color: var(--item-image-overlay-color, #FFF);
                    content: '';
                    opacity: 0.76;
                    transition: all .3s ease-in-out;
                }
            }

            .swiper-slide.swiper-slide-prev,
            .swiper-slide.swiper-slide-next {
                z-index: 1;

                &::after {
                    opacity: 0.44;
                }
            }

            .swiper-slide.swiper-slide-prev {
                transform: scale(0.9) translateX(50px);
            }

            .swiper-slide.swiper-slide-next {
                transform: scale(0.9) translateX(-50px);
            }

            .swiper-slide.swiper-slide-next+.swiper-slide {
                transform: scale(0.8) translateX(-170px);
            }

            .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev) {
                transform: scale(0.8) translateX(-170px);
            }

            .swiper-slide.swiper-slide-active {
                opacity: 1;
                z-index: 2;
                transform: scale(1);
                cursor: default;

                &:active {
                    cursor: default;
                }

                &::after {
                    display: none;
                }
            }

            .swiper-button-prev,
            .swiper-button-next {
                font-size: 0;
                text-indent: -999px;
                overflow: hidden;
                width: 64px;
                height: 64px;
                background-color: var(--arrow-bg-color, #FFF);
                border-radius: 50vw;
                transition: all .35s ease-in-out;

                span {
                    width: 0;
                    height: 0;
                }

                &::after {
                    content: '';
                    height: 35px;
                    width: 35px;
                    background-color: var(--arrow-color, var(--primary-color));
                    transition: all .35s ease-in-out;
                }

                &:hover {

                    &::after {
                        transform: scale(1.2);
                    }
                }

                @media only screen and (max-width: 600px) {
                    width: 50px;
                    height: 50px;
                }
            }

            .swiper-button-prev {
                transform: translateX(-50%);
                left: 0;

                &::after {
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11.5246 4.05518L5.57983 9.99997L11.5246 15.9448L12.9975 14.4718L8.52567 9.99997L12.9975 5.52809L11.5246 4.05518Z' fill='%23002F6C'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }

            .swiper-button-next {
                right: 0;
                transform: translateX(50%);

                &::after {
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.13959 16.0562L14.0844 10.1114L8.13959 4.16666L6.66667 5.63957L11.1385 10.1114L6.66667 14.5833L8.13959 16.0562Z' fill='%23002F6C'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }
        }
    }
}

#app .video-stories-section-v1 #slider-story .video-stories-slides>div:has(.glightbox-video) .content {

    &:after {
        content: '';
        position: absolute;
        left: 50%;
        top: calc(26.563vw/2);
        width: 100px;
        aspect-ratio: 1;
        max-width: 25%;
        transform: translate(-50%, -50%);
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none'%3E%3Ccircle cx='50' cy='50' r='46.0938' stroke='white' stroke-width='7.8125'/%3E%3Cpath d='M70.3125 47.38C72.3958 48.5444 72.3958 51.4556 70.3125 52.62L42.1875 68.3402C40.1042 69.5046 37.5 68.0491 37.5 65.7201L37.5 34.2799C37.5 31.9509 40.1042 30.4954 42.1875 31.6598L70.3125 47.38Z' fill='white'/%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: center center;
        mask-size: cover;
        transition: all .35s ease-in-out;

        @media only screen and (max-width: 760px) {
            top: 219px;
        }
    }
}


/* end video stories */