@use '../../utils' as *;

/*----------------------------------------*/
/*  4.44 video css
/*----------------------------------------*/

.rs-video {
    &-one {
        position: relative;
        z-index: 2;
        padding-top: 170px;
        padding-bottom: 170px;
        overflow-x: clip;
        @media #{$lg}{
            padding-top: 100px;
            padding-bottom: 100px;
        }
        @media #{$md}{
            padding-top: 80px;
            padding-bottom: 80px;
        }
        .rs-video-bg-thumb {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            border-radius: 12px;
        }
        .has-bg-gradient {
            &.rs-play-btn {
                background: radial-gradient(at center center, #474A4A1F 0%, #E2EDED1F 100%);
                border: 1.5px solid rgba(255, 255, 255, 0.5);
                backdrop-filter: blur(21px);
                color: var(--rs-white);
                &::before {
                    content: none;
                }
            }
        }
    }
    &-two{
        overflow-x: hidden;
        .rs-video-wrapper{
            position: relative;
            z-index: 1;
            height: 458px;
            @media #{$xl}{
                height: 400px;
            }
            @media #{$md}{
                height: 350px;
            }
        }
        .rs-video-bg-thumb {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 12px;
            &::before{
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: linear-gradient(180deg, rgba(16, 14, 18, 0) 29.69%, #100E12 100%);
                border-radius: 12px;
            }
        }
        .rs-video-content-wrapper{
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
        }
        .rs-video-title {
            color: var(--rs-white);
            margin-top: 20px;
            @media #{$xs}{
                font-size: 18px;
            }
        }
    }
}