@import "../../bootstrap/variables";


.video-and-image-slider-full-width-section {

    &__slider-item {
        position: relative;
        width: 100%;
        height: 800px;
        overflow: hidden;
        background-color: var(--black);

        .slider-item-cover-img {
            transition: all .4s cubic-bezier(.37, 0, .63, 1);
        }

        &:hover .slider-item-cover-img {
            transform: scale(1.1);
            opacity: .5;
        }

        video {
            height: 100%;
            border-radius: 32px;
        }

        &-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 273px;
            border-radius: 0 0 32px 32px;
            background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
            z-index: 2;

            .dark-mode & {
                background: linear-gradient(0deg, #E1EAF6 0.34%, rgba(225, 234, 246, 0.00) 99.89%);
            }
        }

        &-video-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.30);
            border: 12px solid var(--white);
            backdrop-filter: blur(4px);
            transition: all .4s ease;

            .dark-mode & {
                background-color: rgba(30, 31, 38, 0.3);
            }
        }

        &:hover &-video-btn {
            transform: translate(-50%, -50%) scale(1.04);
        }

        @media (max-width: $screen-sm-max) {
            height: 440px;
        }
    }
}