.block.home_video {
    position: relative;
    height: var(--home_video-height);
    display: flex;
    flex-direction: var(--home_video-flex-direction);
    justify-content: space-between;
    margin: 100px auto;
}

/** lg (for large screens - screens greater than 1200px wide) **/
@media(min-width: 1200px) {
    :root {
        --home_video-height: 420px;
        --home_video-flex-direction: row-reverse;
    }        

    .block.home_video .content {
        margin-left: calc(50vw - 1140px / 2);
    }
    .block.home_video iframe {
        width: calc(1140px / 2);
    }
    .block.home_video .header {
        width: 50vw;
        padding: 20px;
    } 
    .block.home_video .header .subtitle {
        padding: 40px 20px;
        margin-left: -20px;
        width: calc(50vw);
        background-color: var(--color-yellow);
    }
}
/** md (for small laptops - screens equal to or greater than 992px wide) **/
@media (min-width: 991px) and (max-width: 1199px) {
    :root {
        --home_video-height: 420px;
        --home_video-flex-direction: row-reverse;
    }        
    .block.home_video .content {
        margin-left: calc(50vw - 900px / 2);
    }
    .block.home_video iframe {
        width: calc(900px / 2);
    }
    .block.home_video .header {
        width: 50vw;
        padding: 20px;
    } 
    .block.home_video .header .subtitle {
        padding: 40px 20px;
        margin-left: -20px;
        width: calc(50vw);
        background-color: var(--color-yellow);
    }
}
/** sm (for tablets - screens equal to or greater than 768px wide) **/
@media (min-width: 768px) and (max-width: 990px) {
    :root {
        --home_video-height: 420px;
        --home_video-flex-direction: row-reverse;
    }  
    .block.home_video .content {
        width: calc(50vw - 20px);
    }
    .block.home_video iframe {
    width: 100%;
    margin-left: 20px;
    }
    .block.home_video .header {
        width: 50vw;
        padding: 20px;
    } 
    .block.home_video .header .subtitle {
        padding: 40px 20px;
        margin-left: -20px;
        width: calc(50vw);
        background-color: var(--color-yellow);
    }
}

/** xs (for phones - screens less than 768px wide) **/
@media (max-width: 767px) {
    :root {
        --home_video-height: auto;
        --home_video-flex-direction: column;
    }  
    .block.home_video {
        margin: auto;
    }
    .block.home_video .content {
        width: calc(100vw - 40px);
        margin: auto;
    }
    .block.home_video iframe {
        width: calc(100vw - 40px);
    }
    .block.home_video .header {
        width: calc(100vw - 40px);
        margin: auto;
    } 
}