Почему не меняется и не адаптируется высота элемента?

Верстаю 1 экран сайта с видео-бэкграундом. Контент поверх видео не адаптируется, что бы я не делала (задавала высоту в %, px, меняла из position и т.д.). Подскажите, пожалуйста, как сделать так, чтобы &__content или &__wrapper подстраивались по высоте при адаптации, не обрезались?

HTML

    <div class="intro">
    <div class="video">
        <video class="video__media" src="video/main_bg.mp4" loop autoplay muted>
            <source src="video/main_bg.mp4" type="video/mp4"> 
            <source src="video/main_bg.mpeg" type="video/webm">
            <source src="video/main_bg.ogv" type="video/ogv">
            <source src="video/main_bg.webm" type="video/webm">
        </video>
    </div>

    <div class="intro__content">
        <div class="container">
            <h1 class="intro__title">LevelUp</h1>
            <div class="intro__wrapper">
                <div class="intro__img">
                    <img src="img/prod.png" alt="prod">
                </div>
                <div class="intro__descr">
                    <ul>
                        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
                    </ul>

                    <button href="#" class="btn" data-scroll="#form">Заказать</button>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

.intro {
max-height: 100vh;
overflow: hidden;
position: relative;
background: url('../img/promo_bg.jpg') center no-repeat;
background-size: cover;
&::after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
&__content {
    width: 100%;
    height: 100%;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
&__title {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 50px;
}
&__wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
}
&__img {
    opacity: 0.9;
}
&__descr {
    margin-top: 30px;
    li {
        margin-top: 50px;}
}}

На всякий случай, скрины:

https://skr.sh/s9nCYOPYAVq?a - обычный вид https://skr.sh/s9nWWM6GBeP?a - при адаптации