Помогите с выравниванием css пожалуйста

У меня есть такой html

123456789101112131415161718192021222324252627282930313233

 <div class="container_fast_video_info"> 
                <div class="video_container"> 
                    <video class="video" autoplay loop muted controls> 
                        <source src=""></source> 
                    </video>     
 
                    <div class="video_slider"> 
                        <div class="slider_buttons_arrows"> 
                            <button class="slider_navigation_left"><img src="../images/icon_arrow.svg" alt=""></button> 
                            <button class="slider_navigation_right"><img src="../images/icon_arrow.svg" alt=""></button> 
                        </div> 
     
                        <div class="slider_buttons_bottom"> 
                            <button class="slider_navigation_bottom_1"></button> 
                            <button class="slider_navigation_bottom_2"></button> 
                            <button class="slider_navigation_bottom_3"></button> 
                            <button class="slider_navigation_bottom_4"></button> 
                            <button class="slider_navigation_bottom_5"></button> 
                        </div> 
                    </div> 
                </div> 
                <div class="product_information_container"> 
                    <div class="product_information_button icon_animation"> 
                        <button><img src="" alt=""></button> 
                        <button><img src="" alt=""></button> 
                        <button><img src="" alt=""></button> 
                    </div> 
                    <p class="product_information_text">Lorem</p> 
                </div> 
                <div class="button_movie"> 
                    <button class="button"></button> 
                </div> 
            </div>

Дополнен

И такой css

.container_fast_video_info {
display: grid;
grid-template-areas:
'video_container product_information_container'
'video_container button_movie';
grid-template-rows: 3fr 0.5fr;
grid-gap: 30px;
height: calc(100vh - 70px);
}

.video_container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
grid-area: video_container;
background-color: red;
}

.video {
height: 600px;
border-radius: 16px;
border: 2px solid #98999a;
}

.product_information_container {
grid-area: product_information_container;
padding: 10px;
border: 2px solid #98999a;
}

.button_movie {
grid-area: button_movie;
border: 2px solid #98999a;
}

Дополнен

Там ещё есть код но он не столь важен...

Задумка такая: есть container_fast_video_info, в котором есть video_container, product_information_container и button_movie, у каждого есть свой grid-area, мне надо выровнять по центру относительно размера экрана (именно экрана, а не всего сайта) всё, что входит в container_fast_video_info, я попробовал что-то сделать, использую vh, но не всё слетело, так как grid-area: video_container; находится внутри video_container, а я для video я прописываю размер 600px, из-за чего мой video_container больше, чем video. В общем, какая-то такая проблема, очень прошу помочь.