В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, блоки в БЭМ не должны ничего знать о своей внешней геометрии. Значит, если в неё есть необходимость, то это нужно делать в классе элемента.

Если вы хотите использовать только БЭМоподобный нейминг, то тогда вообще без разницы.

Как разместить с помощью гридов данный блок?

Yaroslav723,

какая проблема в коде где именно?

В арифметике.
160х2 не будет равно 280.
А вы пишете 2fr 1fr. Ну точнее не вы, а тот кто вам подсказал это в ответе.

Если блок неадаптивный, то можете задать по min-content.
Если адаптивный, то задать оберткам картинок aspect-ratio, если позволяет ТЗ или использовать хак с паддингами для пропорций (легко гуглится). А картинкам ширину и высоту по 100% и подходящий object-fit.

Потом определиться откуда взялся 1em в gap и задать нормально (в зависимости от необходимого поведения при адаптиве)

Как разместить 2 фона и сделать адаптиность?

SeriousAnonymous, что-то вы в svg мужика подрастянули слегка.

Сейчас имеет такой вид с 2 объединенными картинками.

И хорошо. На больших экранах скорее 100%, чем cover.
А на маленьких без указания size, но с заданным bg position, чтобы была чуть задвинута за правый край и обрезалась по левому.

Как разместить 2 фона и сделать адаптиность?

SeriousAnonymous, png или jpg можно залить сюда и скопировать путь. Можно на гитхаб или бесплатный/временно бесплатный хостинг или в какой-нибудь сервис, дающий нормальную ссылку. Можно взять похожую картинку из яндекс.картинок.

Как разместить 2 фона и сделать адаптиность?

Изменяйте поведение фонов с помощью @media.

Сделайте песочницу на codepen.io или аналоге с видимой проблемой.

Фон должен быть размеров 1920px

А на экранах больше чем 1920 что должно быть?
У вас там картинка с мужиком 1157. Если вы её растянете на 1920... будет ну такое себе. А если ещё и ретина, то совсем.
Вторую картинку хорошо бы получить в формате SVG.

Есть вариант попроще: взять и засунуть мужика в внутрь svg и будет одна картинка. А потом уже её позиционировать.

В чем смысл БЭМ блока, если нужны служебные блоки?

htmlclassic, у (4) будет два класса (или по крайней мере два, если вдруг еще будут модификаторы).
Первый - класс элемента от родительского блока.
И второй - класс блока.
В БЭМ это называется микс. Почитайте в спеке.

А (5) вообще лишний. Вместо него можно сразу форму писать.
И у этой формы тоже будет аналогичный микс из классов. Потому что она элемент попапа (или contact-information) и при этом тоже самостоятельный блок.

Как работает flex-grow?

flex-grow делит свободное пространство в родителе между дочерними элементами в указанных пропорциях.

Если вам нужны блоки одинаковой ширины, так и задайте им одинаковую ширину.

Как правильно оформить css что бы ячейка гриды получилась нужной?

В вашей песочнице нет картинки (можно любую подходящую из яндекс.картинок или заглушку из placehold.it)
И совсем нет стилей.
Поэтому не видно, что вы пытались сделать.

Самый простой способ: обернуть весь текст в div.
Вариант сложнее и нужно точно знать количество элементов слева: просто картинку задаете grid-row и указываете сколько строк она должна занять.

Обычный float: right к картинке не пашет.

Чтобы он пахал, картинка должна быть первой в коде и родитель не должен быть гридом или флексом.

Как изменять value в поле input динамически?

Валентин Попов, даже не знаю...
Почему-то у меня всё работает https://codepen.io/AnnaSummer/pen/mdXMazG

Как изменять value в поле input динамически?

input.value = parseFloat(input.value)+1

Как лучше переформировывать таблицу на мобильном разрешении?

На мобилках добавить названия псевдоэлементами.
Остальное переформировать флексами/гридами.

Картинки не пропорциональны, когда запускаю проект на Windows. Как сделать так чтобы картинки отображались нормально?

Leo Sobolev, и что же у вас указано в размерах картинок?

А лучше бы иллюстрацию проблемы в песочницу типа codepen.io

Как корректно сделать плавное изменение цвета кнопки при hover?

https://css-tricks.com/property/

Как прижать footer к низу страницы?

Актуальные способы - флексы или гриды.
Гридами https://codepen.io/AnnaSummer/pen/gOvbEdB

Как разместить с помощью гридов данный блок?

Александр Варлаков, угу, только больше толку, если писать об этом не мне (отвлекая тем самым не понятно на что), а ТСу

Как разместить с помощью гридов данный блок?

Александр Варлаков, спасибо, я умею

Как разместить с помощью гридов данный блок?

Две строки, два столбца.

Что именно у вас не получилось?
Ваш код с видимой проблемой разместите в песочнице типа codepen.io

Пройдите простенькую игру по гридам, очень поможет https://cssgridgarden.com/#ru

Как адаптировать картинку под сайт?

WoodyAndBuzz,

Марджин я использую как отступ (общий).

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

Более того, этот общий отступ у вас уже учтен в Products__wrapper. Вот же вы пишете:

.Products__wrapper {
  margin-left: 6.9%;
  margin-right: 7.2%;
}

Правда, почему-то разный справа и слева...

Но вопроса это уже вообще не касается.

Посмотрев макет, могу добавить то, что вы не могли сформулировать. Размер обеих картинок должен быть одинаковым.
Значит, картинку нужно обернуть в тег figure, задать ему пропорции с помощью aspect-ratio, если позволяет ТЗ или хака с паддингами (легко гуглится).
Картинке задать стили, которые я написала в первом комментарии.

Как отвязать placeholder от background у input?

safo4eg, цвет плейсхолдера поменяйте на белый. У вас он и сейчас виден, просто плохо.
https://developer.mozilla.org/ru/docs/Web/CSS/::pl...

Как адаптировать картинку под сайт?

WoodyAndBuzz,

Эти два блока по задумке должны прижиматься к краям.

Я вам для наглядности рамочку нарисовала у aside, чтобы четко было видно, что оба дочерних прижаты каждый к своему краю блока.
https://codepen.io/AnnaSummer/pen/PoQjrZp

Тогда будет у правого края небольшой отступ, который не нужен

Но вы там сами придумали небольшой отступ margin-right: 7.2%;