ⓒⓢⓢ

можете попробовать что-нибудь такое:
https://codepen.io/jrkdv/pen/KKQQdEq

но как подметили

нужно на стороне сервера обрабатывать и чистить от не нужного

потому что браузер не может загрузить картинку по указанному url адресу

• разметка картинки не валидная (в адрес попал alt)
  
• открываете в браузере файл страницы , а не ссылку на сайт
  из-за этого надо править относительный адрес картинки:
  или начинать адрес с точки "./img/", или без начального слеша, или использовать абсолютный url адрес на картинку
  

страница маленькая, но всё же пару пунктов есть

1. проверить свой бэм, например, карточка товара ".item__wrapper"
есть элемент "wrapper", который принадлежит к блоку "item" - а самого блока item нет ...

2. капс в наименовании классов, - это очень редкое явление и не практичное
если и использовать аннотации бэма можно же примиксовать класс или воспользоваться модификатором

3. воспользоваться микроразметкой для товара, - магазин всё же
для первых страничек не заморачивайтесь с этим
https://yandex.ru/support/webmaster/schema-org/wha...

Вследствие этого у меня возник вопрос: что это за код, почему код такого типа есть на всех сайтах и за что он, собственно, отвечает?

на 99% уверен, что этот код вставляет ваш браузер для блокировки рекламы. То есть на самих сайтах такого кода нет.
да и можете сами проверить, так ли оно, если открыть именно исходный код страницы (Не инспектор элементов) и там посмотреть наличие такого кода

фреймы? https://jsfiddle.net/mv7wfdjc/

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

но от меня требуют чтобы псевдо закрывал только фон

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

.start__image:after {
  pointer-events: none;
  touch-action: none;
}

Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

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

Центральный блок
Делаете так же векторные элементы для кубиков.
Текст можно позиционировать отдельными блоками.
Рамки для полей ввода можно сделать только боковые (по левой и правой стороне), верх\низ соответственно будет border

Блок по правой стороне
Это отдельный aside блок с вкладками, а для фона делаете 2 слоя с линейным градиентом:
- Первый слой фона для верхней линии (разделяющую кнопки вкладок)
- Второй слой фона по левой стороне блока
Кнопки вкладок делаете с псевдоэлементами, красите с прозрачностью в зависимости от статуса "активная\неактивная" и сдвигаете друг на друга внешним отступом (отрицательный margin)

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

ещё как вариант, на всю страницу
https://codepen.io/anon/pen/dBzoLe

Попробуйте воспользоваться position: sticky; для блока ".header.header--fix"
Ещё как вариант, замените селектор ".wrap--filter" на ".wrap--filter > *", чтобы фильтр применялся только к дочерним элементам. Фильтр и в вашем варианте применяется к дочерним, но лишь с той разницей, что блок .wrap--filter останется без фильтра

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

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

Почему так?
Для картинок (тег img) у вас указаны стили фона - они не работают, потому что тег img это не фоновый элемент.
Картинки обрезаны, потому что высота тега img недостаточная (сама картинка не влезает в размеры тега img)
Что можно тут сделать?
Вариант 1: Использовать картинки размерами кратными с размерами тега img.
Вариант 2: Использовать стиль object-fit: cover и растянуть по высоте тег img на нужный размер.
Как растянуть по высоте тег "img"?
Т.к. вам надо без применения height, то можно установить стиль display: inline-flex для ссылок (тег "a").
У flex элементов значение стиля align-items по умолчанию - Растягивать элементы на размеры родительского блока
С другой стороны, применение height для картинок даст такой же эффект, но без использования флекса.

Пример с height и flex вариантом
https://jsfiddle.net/f7a2qyj8/

никак, тень для всех сторон сразу задаётся. Но можете сверху наложить ещё одну тень

box-shadow: 0 5px 0 white, 0 0 5px rgba(0,0,0, 0.25);

ещё так можно
https://codepen.io/anon/pen/Jqrvzv?editors=1100

у вас на скрине со знаком вопрос, если присмотреться, то идёт переопределение класса "column-big" на
width: $wrapper-size / 3;

Есть ли чистые верстальщики, которые при этом работают в проектах, использующих SPA? И какой уклад работы в таком случае?

уклад такой: подготовить наиболее удобную в использовании вёрстку
Под "удобнее" подразумеваю продумать логику, как будет фронт взаимодействовать с нашими элементами, наиболее меньшими операциями.

там где надо помечаем комментариями, где не надо выносим стили в вёрстку, чтобы по элементу было понятно как с ним работать.

К стилям вёрстки не подпускаю, добавляют стили в сторонний файл, который подключается после моих.
При необходимости стили мержу к себе в вёрстку

например, можно так, но не очень гибко получилось:
https://codepen.io/anon/pen/PLgwPO

Почему текст в кнопке переходит на вторую строку?

много факторов может быть, но обобщёно, это из-за того что, нет ширины (width), поэтому блок стремится к наименьшему размеру, а наименьший размер в вашем блоке устанавливается размером слова "ПРОЕКТЕ"

установите width или white-space: nowrap

когда начал задавать фон th

th в thead? ... тогда и градиент на thead повесьте

если есть свободный псевдоэлемент, то поставьте абсолютом с бордером топ\право