// Modal ===========================
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5px);
    z-index: 50;

    display: none;

    &.active {
        display: block;

        .modal_inner {
            top: 50%;
            opacity: 1;
        }
    } 

    &_inner {
        position: absolute;
        top: 60%;
        left: 50%;
        @include transform;
        max-width: 600px;
        width: calc(100% - 120px);
        max-height: calc(100% - 150px);
        padding: 70px 50px;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: 5px;
        @include transition;
        opacity: 0.3;
        display: block;
    }

    &_close {
        position: absolute;
        top: 30px;
        right: 30px;
        cursor: pointer;
        width: 20px;
        height: 20px;

        &:hover {
            svg path {
                fill: red
            }
        }

        svg {
            @include ImgCon;
            @include transition;
            pointer-events: none;
        }
    }

    &_video {
        width: 100%;

        video {
            @include ImgCon;
        }
    }
}