FrelFrloich

hello.style.opacity = "0";
hello.style.transition = "0s all ease";
  setTimeout(function () {
   hello.style.opacity = "1";
   hello.style.transition = "0.3s all ease";
  }, 100);

hr{
        width: 71%;
	height: 2px;
	background: black;
}

Если прям так охото через hr,

А с чего взяли что это вообще градиент? может это тень инсет

const menu = document.querySelectorAll('.menu')
menu.forEach((container) => {
    container.classList.remove('show')
})

впишите перед тем как задать клас

Думаю вы это хотели https://codepen.io/FrelAderal/pen/mdMgdOV

<div class="container">
    <img class="img" src="" alt="">

    <div class="text-container">
        <!-- текст -->
    </div>
</div>

.container {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 100vh;
}
.img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1320px;
}

если прям надо двумя картинками

<div class="container">
    <img class="img" src="" alt="">
    <img class="img" src="" alt="">
    
    <div class="text-container">
        <!-- текст -->
    </div>
</div>

.container {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 100vh;
}
.img {
    position: absolute;
    top: 0;
    bottom: 0;
    разделисть по сторонам картинки

    width: 50%;
    height: 100%;

    object-fit: cover;
}

.text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1320px;
}

При клике на пункт меню со шрифтом, указать в боди шрифт. Ну или куда там в ходите подключить.

Отрегулируйте, условий прибавьте.

const header = document.querySelector('.header')
    window.onscroll = () => {
        const anyScroll = scrollY
        if (anyScroll > 200) {
            header.classList.add('header-whitel')
        } else {
            header.classList.remove('header-red')
        }
    }

Вы не правильно подходите к вопросу, если определённые разрешения экранов, допустим 1920 1440, 1024, 768, 460, 360, 320

Между 1920 и 1440 по большей части плевать как выглядит сайт и это разрабатывается на стадии дизайна и изначальной вёрстки,

Но вы привели в пример 1536px, это разрешение 1920 с включённой по дефолту в винде 125% увеличением, соответственно если ваш макет разработан как полагается с 1920 то всё нормально должно смотреться до разрешения 1536px, а дальше уже будет плыть.

Изначально куда вы смотрели когда принимали работу не понятно.

Прочитав немного ваших желаний, они не имеют ничего общего с реальностью, вы хотите впихнуть не впихуемое, что бы ваше меню смотрелось адекватно на телефонах и так как вы не хотите делать вертикально, естественно оно должно уменьшать в плане размера текста и т.п. в последствии пользователь не увидит вашего меню.

Вы не сможете впихнуть в полку с глаженным бельём 100 рубашек, когда полка предназначена для 20, без последствий в плане мятости или обрезания лишнего. Хотя желание у вас такое может быть.

На css или оберните ваш список с картинкой в один блок и задайте.

<div class="menu">

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

  <div class="menu__list">
    <div class="menu__item">Тут ваш список</div>
    <div class="menu__item-image">Тут картинка</div>
  </div>

</div>

.menu {
display: flex;
}

.menu__list {
display: flex;
flex-direction: column;
}

Или применяйте grid, будет меньше ненужной разметки. Хватит на мозги человеку капать, какой к чёрту js.

в элемент c кино поиском спрячьте всё меню, при наведении выводите, я грубо опишу нижу.

<div class="search">
<button class="search__button" aria-label="Кнопка вызова меню">КиноПоиск</button>

<ul class="search__list">
 тут контент который вам нужен
</ul>
</div>

<code lang="css">
.search  {
   posititon: relative;

   //наводим красоту
}
.search__list {
   position: absolute;

   //тут тоже наводим красоту и позицианирование

   opacity: 0;
}

.search:hover .search__list  {
   opacity: 1;
}
</code>

ul ul
position: absolute;
уберите, это по первому варианту.

с ограничением высоты
max-height: 300px;
overflow-y: auto;
при достижении 300px появится скролл, вы все делали верно.

display: inline-block;

К выше сказанному добавлю, стандартно навигацию с шапки.