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

Что-то мне подсказывает, что тут должно быть 2 точки перед images:

.card-1 {
  margin-left: 25px;
  background-image: url("../images/card1.png");
  background-size: cover;
  width: 328px;
}

.card-2 {
  background-image: url("../images/card2.jpg");
  background-size: cover;
  width: 330px;
}

.card-3 {
  margin-left: -2px;
  width: 328px;
  background-image: url("../images/card3.jpg");
  background-size: cover;
}

По-быстрому набросал:

В десктопной версии просто скроллим к нужному слайду, ну а в мобильной делаем полноценный слайдер как нужно...

Для таких целей идеально подходит -webkit-mask, особенно если фон не однородный:

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

.header-slider>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

либо повысить специфичность:

.header-slider.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

Но лучше создать кастомную пагинацию и самостоятельно определять стили:

pagination: {
            el: '.dots',
            type: "bullets",
            clickable: true,
            bulletClass: "dot",
            bulletActiveClass: "dot_active",
            renderBullet: function (index, className) {
                return '<div class="' + className + '"></div>';
            },
        },

Воспользуйтесь tippyjs и вызывайте её с параметром:
appendTo: () => document.body,
Контент будет помещен поверх всего сайта

Еще отдельно вопрос- по структуре кода можно ли оставить в таком виде слайдер в виде списка UL>LI, каждый li завернуть в .swiper-slide или переделать на .swiper-slide> div>button

li должны быть вложены в ul в таком виде:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

И никак иначе, поэтому вы можете сделать разве что так:

<ul class="swiper-wrapper">
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
</ul>

Тут 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);

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

После открытия вкладки необходимо сделать сброс для слайдера. Как-то так:

if (contentBlockYacht) {
    $('.slider-yacht-02, .slider-yacht-nav-2').slick('setPosition');
    contentBlockYacht.classList.add("open-yacht-active");
}

Например так:

или так:

или так:

Что конкретно вам нужно?

Ваши 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 и т.д..

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

min-width: 0; добавить к item2

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

Так вы сами сделали, уберите:

.select2{
width:100% !important;
}

upd. Чтобы select2 не растягивался внутри грид контейнера задайте блоку в котором находится select2 свойство min-width: 0;

main {
  flex-grow: 1;
  min-width: 0;
}