Как подключить шрифт в сборке Gulp через font-face?

1. Одно свойство src и в нём через запятую шрифты.
В форматах woff2 и woff (если поддерживаете предыдущее поколение браузеров).
Причем, сначала woff2 и только потом woff. Иначе до современного формата никакой из браузеров не дойдет (проверяйте на вкладке Network)
Остальные форматы в помойку.

Пример

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

2. Дальше, вы почему-то подключаете шрифт regular, а браузеру говорите, что его нужно применять в качестве жирного курсива.

3. Ну и самое важное - это пути к файлам.
Откройте инструменты разработчика и посмотрите по какому пути браузер ищет файлы и где они лежат на самом деле. Используйте пути к шрифтам относительно готового css. Судя по скринам, должно быть типа того ../fonts/font.woff2

Как правильно по БЭМу?

2) Как лучше именовать product-item или item-product?

Какие у вас аргументы против понятного product?

Но если все таки не product, то вам помогут правила английского языка.

1) Айтем продукта и детали продукта могут сильно отличаться. Они должны быть одним БЭМ блоком? Например, product. Или разными, например, product-item и product-detail

Логично, что это один блок. И модификаторы к нему. Если он при этом еще является дочерним элементом списка продуктов, то микс из элемента и блока.

Почему не работает if(e.target.classList.contains('.class'))?

Потому что название класса просто class без точки.

Почему не работает if(e.target.classList.contains('.class'))?

jarderRek ау?

Не грузяться картинки. Что делать?

Открываете инструменты разработчика, вкладку Console.
Браузер напишет, что не нашел картинки и где их искал.
Нужно сравнить те пути по которым ищет браузер и те, по которым реально лежат файлы.
Скорректировать.
Перед тем как исправлять, чтобы не накосячить ещё больше, можно прочитать: Абсолютные и относительные ссылки

Как работать с в HTML и нормально его стилизовать?

Илья Ломаев, play()
https://yandex.ru/search/?clid=9582&text=javascrip...

Как работать с в HTML и нормально его стилизовать?

Обертка гридом. Снизу видео (или его превью), сверху оверлей на который можно нажать либо кликабельна только кнопка.
Это с точки зрения разметки и стилей.
А дальше на JS делаете всё, что нужно: показываете видео, скрываете кнопку и т.д.

Стоит ли делать несколько инлайновых элементов на одном уровне, следуя БЭМ?

Тут дело не в БЭМ, а в доступности и семантике.
И соображений несколько:
Для доступности у инпутов должны быть label. Если их нет в макете, то они должны быть доступно скрыты с помощью паттерна visually-hidden (гуглится).
Если идет несколько подряд инпутов, то вероятно, это список.
В итоге получаем список, каждый элемент которого input + label = красивая, доступная структура. К тому же помогает стилизации.

Как убрать пустое пространство под footer'ом?

iadarch, посмотрите https://codepen.io/AnnaSummer/pen/gOvbEdB

Как сверстать стрелочки в макете?

Градиентами, псевдоэлементами, SVG... вариантов довольно много.

Чтобы не было проблем при адаптиве, можно использовать относительные единицы измерения и calc.

Оцените пожалуйста верстку?

1. Каким образом можно воспользоваться поиском, если это одинокий инпут без формы и сабмита? (Читалки, клавиатуры, мышки).
Там же: почему вы считаете лупу контентным изображением? Аналогичный вопрос и про другие иконки.
2. У вас практически весь текст свёрстан заголовками разного уровня. А что не заголовки, то div.
Даже количество страниц у вас заголовок. Ладно бы ещё секция вокруг была бы..
3. Дальше про пагинацию: всё таки пользователь ожидает, что номера страниц, а также стрелки будут кликабельными.
А не просто сообщением "а там ещё есть страницы".
4. Это в макете такие отступы были?

spoiler

5. Очень странно выглядит

spoiler

Хватит пока

Как расположить кнопку чуть ниже центра?

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

Как остановить анимацию?

MRcracker, ну там... может посимметричнее хотя бы.. :)

Как сделать с нужной степенью затенение равномерное по всему слою?

Wolron, я бы делала на глаз, а если нужно точнее, то так: заменила цвет заливки на черный. Сделала бы белую подложку. Тыкнула бы пипеткой в получившийся серенький цвет. Посчитала %.
Возможно, есть вариант попроще.

Как сделать с нужной степенью затенение равномерное по всему слою?

Не понятно, почему вы не можете сделать просто заливку слоя нужным цветом и прозрачностью?

Про разрешение монитора и размер браузера?

Qwyu_4iLofK, вообще стандартная ширина 3840, а не 3880.
При создании скрина ничего там случайно не сдвигали?

будет размер body будет 1905px

Да, потому что размер body и размер вьюпорта это разные размеры. Во вьюпорт входит полоса прокрутки.

Про разрешение монитора и размер браузера?

Qwyu_4iLofK,

я должна уменьшить масштаб именно браузера?

Нет, вы должны перейти в адаптивный режим в инструментах разработчика и указать там нужный размер.

А это, чтобы убедиться https://www.esolutions.se/en/test

Почему progress теряет свои css стили при flex?

Не вполне понятно, что теряется, кроме центрирования. (Зачем для этого флекс тоже мало понятно)
https://codepen.io/AnnaSummer/pen/oNEvQEM

Сделайте наглядную песочницу на codepen.io

Почему не получается вычислить высоту этих элементов?

Vasya-prijevalskij, вам точно понравится:
https://developer.mozilla.org/ru/docs/Web/API/Inte...
https://habr.com/ru/company/timeweb/blog/574972/
https://habr.com/ru/post/494670/

Где искать макеты сайтов?

Так не пробовали?
Сам-то Пиксар уже сверстали?