Виталий Першин

Тут js вообще не нужно, из самого примитивного: поместите кнопку в самый верх, и спозиционируйте абсолютом в нужное вам место. После чего можно приметить любое свойство к любому элементу ниже этой кнопки:

.drinks__block-btn:hover ~ .drinks__block-title {
    color: white 
}

И drinks__block не самое удачное название, судя по приставке __block вы в глубине души понимаете, что это блок, который можно назвать к примеру card и ваш код будет выглядеть намного приятнее:
card__btn, card__title и т.д..

<div class="drinks__card card">
    <button class="card__btn">ORDER NOW </button>
    <div class="card__body">
        <img class=card__img" src="images/drinks-img-1.png" alt="">
        <h3 class="card__title">ESPRESSO</h3>
         <p class="card__text">Without Milk</p>
        <p class="card__price">300 ₽</p>
    </div>
</div>

Как вариант, можно применить формулу:
width: calc(100% + (100vw - 100%) / 2);
то есть:

width: calc(ширина_контейнера + (ширина_экрана - ширина_контейнера ) / 2);

Тогда мы получим значение от левого края контейнера до правого края экрана, но нужно еще учитывать отступы, если таковые имеются.

Упрощенная формула для понимания концепции без учета padding и border:


Более простой вариант со скрытием сайдов с левой стороны:

Ваши item являются флекс элементами и имеют свойство flex-shrink, которое по умолчанию ровно 1. Чтобы они забирали все требуемое ими пространство поставьте flex-shrink: 0

Начнем с того, что не обрезаются, а сжимаются. Ваши изображения находятся во flex контейнере, поэтому все его элементы имеют свойство flex-shrink, которое по умолчанию ровно 1. Чтобы ваши изображения сохраняли свой размер необходимо добавить к ним свойство flex-shrink: 0

Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:

Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.

Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..

Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.

Сделайте обертку для элемента, который хотите анимировать при появлении и навешивайте эффекты появления на обертку, а ховеры уже на конкретный элемент, чтобы не переопределялись свойства ваши и библиотеки

Должен быть placeholder и он не должен быть пустым:

Как вариант:

Чтобы определить правильный подход необходимо видеть дизайн. Тут 2 варианта. Если эти шрифты являются частью дизайна блока, тогда описывайте их к конкретным классам этого блока. Если же это какие-то контентные элементы, которые могут применяться независимо от того где находятся, тогда создайте для каждого шрифта класс и подключайте где необходимо

locomotive-scroll
ScrollMagic
scrolltrigger

Для этого есть breakpoints.
Смотрите документацию и примеры в ней.

var swiper = new Swiper(".swiper", {
    slidesPerView: 3,
    spaceBetween: 20,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 16
    },
    // when window width is >= 1000px
    1000: {
      slidesPerView: 3,
      spaceBetween: 20
    },
  }
});

Под мобилки требуется меньше стилей, по большей части это плиточки которые идут друг под другом. Используя Mobile First под мобильные устройства создается база, которая постепенно обрастает стилями доходя до десктопной версии, именно поэтому стилей получается меньше, потому что по больше части они дополняются, а не переопределяются или отменяются. Вам не придется выкручиваться и тратить лишнюю энергию на то чтобы впихнуть какой-то сложный блок, потому что он изначально простой. Это как бутон, который постепенно раскрывается и превращается в красивый цветок или как бабочка вылезает из кокона расправляя крылья, если их попытаться сжать обратно они сломаются.

Далее, даже если не обращать внимание на то с каких устройств заходят посетители, вам придется подстраиваться под поисковые системы, которые требуют оптимизацию под мобильные устройства. При Mobile First верстке у вас эта оптимизацию получится сама собой так как вы выбираете кратчайший путь к правильному отображению. Браузер не будет вообще применять свойства которые больше доступного размера, в то время как при first desktop будут применены все стили и переопределены, отсюда и всякие визуальные скачки при входе на сайт, которые критичны для первой отрисовки и прочие хорошо наблюдаемые не точности с отступами, вылезание блоков за пределы экрана и т.д.. А в случае, если начинают манипулировать вложенностью повышая специфичность, то первый рендеринг для мобильных устройств превращается в страдания

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

От того что я верстаю через min, свойств в css файле меньше не становится.

Ну так все приходит с опытом

Если бы я делал через min-width, то верхняя часть хедера изначально была бы скрыта (display: none), но при ширине выше, например 768px, я бы ее показал (display: block) и писал бы остальные свойства для нее в этом же медиа-запросе.

Это все нюансы, один display: block ничего не порешает. Но бывают ситуации когда стоит комбинировать и min и max, я например описываю меню в отдельных media, я не делаю общих стилей для десктопа и мобилок, потому что там общего практически ничего нет, даже цвета и шрифты иногда отличаются вот кстати размышления Вадима Макеева на эту тему, я делал так задолго до просмотра этого видео и это удобно, кроме того используя сборщик можно раскидать их в разные файлы работать как с отдельными блоками не оглядываясь на переопределения.

variableWidth: true

Если без заморочек, то .htpasswd

в .htaccess прописываем путь:

AuthType Basic
AuthName "Thats protected Area!"
AuthUserFile /var/www/site.com/.htpasswd
Require valid-user
<Files .htpasswd>
   deny from all
</Files>

.htpasswd вставляем сгенерированный код для авторизации:
admin:$apr1$hHD51xzm$fiROCSBv9WtZnG0a86Z8i0
В примере логин admin и пароль admin

Авторизация будет происходить через стандартный alert

Как вариант поиграться с математикой. Внутри контейнера создаем обертку с width: calc(100% * 2); overflow: hidden; , эта обертка уйдет вправо за пределы контейнера и уже внутри обертки самому слайдеру задать размеры calc(100% / 2); и теперь размер слайдера будет равен размеру контейнера, но внутри обертки. Надеюсь мысль поняли... В общем получится как-то так:

Потому что display: none; не анимируется. Как вариант появление можно анимировать при помощи animation

.burger-active {
	animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

а вот если нужно исчезновение анимировать, тогда, либо отказаться от diplay: none; , либо к примеру добавлять промежуточный класс который покажет анимацию исчезновения и в конце поставить display: none;

Там все нормально работает, ровно так как вы и написали в стилях.
flex: 0 0 100%; для .reviews-item зачем вы переопределили flex-basis? Убирайте
max-width во все местах для слайда зачем? Как слайдер может рассчитать себе необходимое пространство, если вы ему его на даете?
В одном месте вы заставляете слайды занимать больше места чем им нужно, в другом же ограничиваете, определитесь.
То же самое с padding и border для слайда, вы не задали box-sizing: border-box; поэтому вы свои слайды увеличили на величину отступов. В общем разбирайтесь со своими стилями
И не надо переопределять стили слайдов, вставляйте свой код внутрь слайда и внутри делайте что хотите