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

Первое как вариант:

Уголки можно заменить svg или png картинками, чтобы стало более гладко

А на второе времени нет

Как вариант так:

Как вариант:

Можно проще:

Вообще не понятно какая у вас разметка и какие правила вы назначаете, но мой хрустальный шар подсказывает:
Убрать 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');
}