Adik Izat

фиксрованная высота и ширина + overflow: auto; и это, стили scroller’a для блока измени под себя и не парься.

Да все равно работадателям на чем ты верстаешь. Главное быстро чтоб было. Я например на чистом css с использованием флексов, %, vw,vh верстаю, и лендос за 2-3 часа могу запилить. Все зависит от человека.

space-between + padding-right/left. Чтобы края менюшки при изменении вьюпорта были красивые. Просто сделай пять пунктов меню. 3-ий пункт меню оставь пустым(тот, который останется под лого). А картинку по центру поставь через abbsolute; top: 0;
left: calc(50% - ( *ширина картинки* / 2 ) )

извилинку сверху делаешь создавая блок с bg: white, z-index выше выпадающей менюхи, и посишн absolute. Тоже делал такую, с извилинкой сверху траблы были.

transition потавьте у hover эффекта. А то у вас транзишн применяется только при загрузке страницы, вы даже заметить не успеете.

&:hover{
transition: 0.1s;
}

У вас там все заабсалючено. Когда блок с абсолютным позиционированием стоит в блоке с абсолютным позиционированием его высота становится равна 0. Тут нужно много корректировок.

z-index-ы не менял. Сами поиграетесь

P.S. Старайтесь не указывать right/left, top/bottom вместе. А если нужно поставить блок по центру лучше использовать флексы.

display: flex;
align-items: center;
justify-content: center;

<div class="block-with-video">
    <div class="fullscreen-bg">
        <div class="overlay"></div>
        <video loop muted autoplay class="fullscreen-bg__video">
            <source src="/img/video/bg.mp4" type="video/mp4">
            <source src="/img/video/bg.webm" type="video/webm">
        </video>
    </div>
</div>

.block-with-video{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}

.fullscreen-bg {
    overflow: hidden;
    z-index: -100;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.fullscreen-bg__video {
    position: absolute;
    overflow: hidden;
    z-index: -1000;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}