FrelFrloich

var swiper = new Swiper('.swiper', {
initialSlide: 1,
})

https://jsfiddle.net/v9huntcx/

Вот как делают на ютубчике в коментах. Опять таки же, объясни для чего тебе это.



+ - вроде это тебе надо, но я так и не понял.

https://codepen.io/FrelAderal/pen/mdMgdOV

Это не своевременно, но разве это не просто круги с цифрами и бефор афтер с бордерами?

Трудно судить, но вы указали своему заголовку типо этого.

.title {
width: 300px
}

а надо:

.title {
width: 100%;
max-width: 300px;
}

таким образом вы укажите заголовку, растягиваться на 100 процентов, но максимально на 300px и когда ваша колонка будет уже 300px он не будет занимать твёрдую позицию в 300px а будет в 100% от этой колонки. В следующий раз заливайте пример своего кода сюда или аналог https://codepen.io/

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

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

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

Думаю вы это хотели 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, без последствий в плане мятости или обрезания лишнего. Хотя желание у вас такое может быть.

в элемент 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>