htmlclassic, блоки в БЭМ не должны ничего знать о своей внешней геометрии. Значит, если в неё есть необходимость, то это нужно делать в классе элемента.
Если вы хотите использовать только БЭМоподобный нейминг, то тогда вообще без разницы.
В арифметике.
160х2 не будет равно 280.
А вы пишете 2fr 1fr. Ну точнее не вы, а тот кто вам подсказал это в ответе.
Если блок неадаптивный, то можете задать по min-content.
Если адаптивный, то задать оберткам картинок aspect-ratio, если позволяет ТЗ или использовать хак с паддингами для пропорций (легко гуглится). А картинкам ширину и высоту по 100% и подходящий object-fit.
Потом определиться откуда взялся 1em в gap и задать нормально (в зависимости от необходимого поведения при адаптиве)
Сейчас имеет такой вид с 2 объединенными картинками.
И хорошо. На больших экранах скорее 100%, чем cover.
А на маленьких без указания size, но с заданным bg position, чтобы была чуть задвинута за правый край и обрезалась по левому.
SeriousAnonymous, png или jpg можно залить сюда и скопировать путь. Можно на гитхаб или бесплатный/временно бесплатный хостинг или в какой-нибудь сервис, дающий нормальную ссылку. Можно взять похожую картинку из яндекс.картинок.
Сделайте песочницу на codepen.io или аналоге с видимой проблемой.
Фон должен быть размеров 1920px
А на экранах больше чем 1920 что должно быть?
У вас там картинка с мужиком 1157. Если вы её растянете на 1920... будет ну такое себе. А если ещё и ретина, то совсем.
Вторую картинку хорошо бы получить в формате SVG.
Есть вариант попроще: взять и засунуть мужика в внутрь svg и будет одна картинка. А потом уже её позиционировать.
htmlclassic, у (4) будет два класса (или по крайней мере два, если вдруг еще будут модификаторы).
Первый - класс элемента от родительского блока.
И второй - класс блока.
В БЭМ это называется микс. Почитайте в спеке.
А (5) вообще лишний. Вместо него можно сразу форму писать.
И у этой формы тоже будет аналогичный микс из классов. Потому что она элемент попапа (или contact-information) и при этом тоже самостоятельный блок.
В вашей песочнице нет картинки (можно любую подходящую из яндекс.картинок или заглушку из placehold.it)
И совсем нет стилей.
Поэтому не видно, что вы пытались сделать.
Самый простой способ: обернуть весь текст в div.
Вариант сложнее и нужно точно знать количество элементов слева: просто картинку задаете grid-row и указываете сколько строк она должна занять.
Обычный float: right к картинке не пашет.
Чтобы он пахал, картинка должна быть первой в коде и родитель не должен быть гридом или флексом.
