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

Можно проще:

Вообще не понятно какая у вас разметка и какие правила вы назначаете, но мой хрустальный шар подсказывает:
Убрать width: 100%
Добавить
flex-grow: 1;
min-width: 0;

Если высота header фикcированная 60px, то самое просто можно сделать так:

.main {
height: calc(100vh - 60px);
}

А вообще вот один из примеров более гибкого прижатия без фиксированных значений:

Что-то мне подсказывает, что тут должно быть 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;
}

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

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

hashNavigation: true,
Demo

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

Ориентируйся чисто для себя, как тебе будет удобно в текущих реалиях. Но если у тебя будет только ноут, то в любом случае дома должен быть еще и нормальный монитор для работы ибо на маленьком мониторе ноутбука кодить это тот еще фетиш.

Если работодатель просит тебя принести свой компьютер в офис, то лучше не связывайся с такой компанией..

Если я правильно понял, то как вариант:

Сделайте так:

function init() {
  new Swiper(".swiper", {
    slidesPerView: 2,
    spaceBetween: 30,
    scrollbar: {
      el: ".swiper-scrollbar"
    },
    breakpoints: {
      0: {
        slidesPerView: 2,
        scrollbar: {
          enabled: true
        }
      },
      500: {
        slidesPerView: 3,
        scrollbar: {
          enabled: false
        }
      }
    }
  });
}

setTimeout(init, 1000);

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

function showAd(id) {
var param = '#'+id+' .truncate-text';
  var obj = $(param);
        $(obj).toggleClass('opener');
}

Потому что там вложенные селекторы, а следовательно специфичность нативных стилей выше. Если хотите переопределить стили, вам необходимо либо применить такую же специфичность, но определить стили после стилей 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>';
            },
        },

const scrollButton = document.querySelector('#scrollUp');
const scrollButtonArrow = scrollButton.querySelector('svg');

scrollButton.addEventListener('mouseenter', () => {

        var staggerTimeline = new TimelineLite();
        staggerTimeline
          .staggerTo(scrollButtonArrow, .3, { y: "-50px", ease: Back.easeOut, }, 0)
          .staggerFrom(scrollButtonArrow, .3, { y: "50px", ease: Back.easeOut, }, 0)
          .staggerTo(scrollButtonArrow, .3, { y: "0px", ease: Back.easeOut, }, 0).repeat(0);
});

Воспользуйтесь 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>