Сергей delphinpro

потому что 100vw != 100%

100vw - это ширина окна вместе с полосой прокрутки
100% - это ширина окна без учета полосы прокрутки

Как только появляется вертикальный скролл 100vw у body становится больше 100% контентной части

Поменяйте у body ширину на 100%

.reviews__slider .reviews__slide {
  height: auto;
  display: flex;
}

.reviews__item{
  box-shadow: -1px 2px 15px 0px rgba(30, 35, 66, 0.15);
  border-radius: 10px;
  padding: 25px 25px 28px 25px;
  margin: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 15px; 
  /* height: 100%; */
}

Я написал вложенный селектор .reviews__slider .reviews__slide потому что в кодпене стили слайдера перебивают. У себя просто подключите сначала стили слайдера, потом свои, и можно будет обойтись без повышенной специфичности.

https://habr.com/ru/companies/microsoft/articles/1...
https://developer.mozilla.org/en-US/docs/Web/CSS/c...

до 4х элементов

Если количество строк ограничено и четко задано, то можно и гриды применить

Как верно отметил galkinhtml проблема в том, что кто-то в контенте задал принудительную ширину флекс-контейнеру. Но убрать эту ширину - не решение. Кто-нибудь в будущем может снова так сделать, эта область заполняется из админки.

Колонки (ячейки) css-сетки по умолчанию имеют минимальную ширину min-width: auto и поэтому ужимаются максимум до значения min-content. Отсюда и решение, задать контентному блоку min-width: 0;. У вас это блок с классом jshop_prod_description.

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

Попробуйте использовать 1vmin вместо 1vh

Это декорации. Разместите их фоном.
В мобильном виде через медиазапрос измените расположение.

Проблема не в слайдере.
Проблема в подвале.

На будущее:
Открывайте сайт в devtools и по очереди удаляйте все блоки. Когда удалите все проблемные, то сайт станет нормально выглядеть.
Например, сейчас у вас, если удалить подвал, то все становится нормально.

PS Еще на будущее. Отлаживайте блоки по одному. То есть отключаете всё, кроме того, с которым сейчас работаете, так, чтобы он остался единственным на странице. Отлаживаете его на всех размерах. Теперь вы будете в нем уверены, что все правильно.

Расположите все линии столбиком по центру

.head-header__burgerMenu {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Задайте размеры линиям

.head-header__burgerMenu div {
  width: 40px;
  height: 5px;
  background: red;
}

Задайте промежутки между линиями

.head-header__burgerMenu {
  ...
  gap: 5px;
}

Сместите все вправо

.head-header__burgerMenu div {
  transform: translateX(5px);
}

Сместите вторую влево

.head-header__burgerMenu div:nth-child(2) {
  transform: translateX(-5px);
}

Мне такой подход нравится: на маленьких экранах табы превращаются в аккордионы.

console.log(document.styleSheets);
console.log(document.styleSheets[0].cssRules[0].selectorText);

::before {
  pointer-events: none;
}

Object fit у вас прекрасно работает. У вас не работает height:100% на картинке.
У родителя нет высоты. Есть min-height, а это не подходит. Чтобы сработал height в процентах, у родителя должна быть явно заданная высота. Если она в процентах, то у его родителя тоже должна быть задана высота и т.д.
Либо блок должен находится во flex/grid контейнере.

Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску