Владимир Солнцев

Присоединяюсь к ответу выше — с дизайном проще.
Можно сделать так:

<div class="hero-section__grid">
  ...
    <div class="hero-item hero-section__hero-item">
      <h2 class="hero-item__header">Hero Item 1</h2>
      ...
    </div>
</div>

Или так:

<div class="hero-section__grid">
  ...
    <div class="hero-section__content">
      <div class="hero-item">...</div>
    </div>
    <div class="hero-section__pagination">...</div>
    <div class="hero-section__footer">...</div>
</div>

Или еще как, выбирая оптимальный вариант для конкретного проекта.

Учитывая, что вам хочется делать элементы элементов, стоит перечитать руководство, методология отлично документирована. Хорошие статьи про БЭМ рассказывают про опыт и набитые шишки других разработчиков, и подразумевают, что вы методологией уже владеете. Если вы не владеете, они вас только запутают. Вводные статьи — вольный и урезанный пересказ официальной документации, причем часто гораздо худшего качества.

Почитайте подробнее доку, вот по теме: https://webpack.js.org/loaders/file-loader/
После описания апи, внизу есть примеры разного использования. Не обязательно через js вставлять, вы в настройках вебпака указываете откуда и куда копировать картинку, в html вписываете текущий урл, при сборке пути заменяются на необходимые.

Вот еще неплохой ресурс по вебпак: https://survivejs.com/webpack/foreword/
Покрывает очень многие вопросы в достаточно сжатой форме, возможно знакомство будет удобнее как раз по этому ресурсу, чем по офф доке.

От диватоза к дивафобии...
цель, как можно меньше дивов - плохая цель. Дивы вообще это неплохо, а нейтрально. Плохо != нейтрально. С таким же успехом можно вместо дивов использовать секции и гордится своей семантичностью 80 уровня. Вполне нормально использовать дивы, если они вам нужны, для группировки или оформления или еще чего, что вам надо выразить и что не имеет какого-либо выраженного контекста.
Конструктивная цель - изучить семантические значения тегов, как пример.

На счет структуры - норм, но я бы ввел дополнительные обертки для группировки логотипа заголовка с текстом в отдельные секции (не обязательно этим тегом). Потому что, вместе они образуют законченные блоки, и имеют сильные связи между собой.

div.logo
  img.logo-img
  p.logo-caption
...
div.banner
  h1
  p

Фу, развод какой-нибудь небось? Подсказка: таймеры, Intersection Observer, скролл.

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

https://github.com/jhildenbiddle/css-vars-ponyfill пробовали? Но, как по мне, вариант с использованием sass\less\stylus лучше.

На css автоматически не получится.
Можно вставить картинкой через свойство background-image, нарисовать svg например.
Можно через канвас нарисовать.

Не уверен, сколько потратил) Не буду рассказывать о процессе обучения и прочем, а то ответ разнесет на несколько экранов. Лучше перейдем к сути.

Вы как учитесь?
На мой взгляд, программирование и верстка это 90% практики. Нужно писать код.
Самый оптимальный вариант обучению новому. В вашем случае верстке html&css

1. Ознакомиться с технологией.
   
2. В зависимости от уровня - взять макет в инете или поставить задачу, например: сверстать главу из любимой книги, или сделать реплику кусочка сайта, который вам нравится. И верстать.
   
3. Получать кайф от магии) «Повелеваю тебе, браузер, сделай этот текст красным, а эту картинку подвинь влево!». Когда не знаете конкретное заклинание, чтобы заставить браузер сделать то, что вам нужно - идти в гугл, искать инфу.
   
4. Когда магии и заклинаний станет уже мало, и вы захотите узнать, как все это дело устроено и почему, идите читать спецификации и серьезные статьи.
   

Суть в том, чтобы не учиться теории, а решать прикладные задачи.
Когда мы читаем теорию без должного подкрепления практикой, мы лишь абстрактно представляем значимость тех знаний, которые добываем. «Ну да, круто, можно написать медиа-запрос под нужныый экран и перестроить сетку, ну да, бывают элементы блочные, блочно-строчные и вообще очень разные. Круто, это мне обязательно где-нибудь пригодится, эх зевнуть что-то хочется...»

А когда мы щупаем руками перестройку сетки, поведение конкретных элементов, думаем о том, как расположить элементы в нужном порядке, сталкиваемся со сложностями и багами, мы понимаем для чего нужны конкретные команды, и как что работает.
Когда начинаем писать полноценные страницы и сайты, сталкиваемся со сложностью, понимаем про вложенность, узнаем что-то про методологии и хорошие практики. И не просто потому, что так надо, а потому что на своем опыте поняли: это полезно и эстетически красиво.
Забегая вперед, большинство концепций без практики вообще не понять. Можно зазубрить и даже немного внедрить в работу. Ну это будет необходимость ради необходимости, а та польза, которую конкретная концепция привносит в процесс разработки останется вне зоны осознавания.

Элементы с заданным блочно-строчным типом видят пробелы, решение:
/jsfiddle.net/kpmjtnw8
Убираем размер шрифта у родительского элемента, возвращаем

.main-nav {
  ...
  font-size: 0;
  ...
}

main-nav a,
main-nav p {
  ...
  font-size: 24px;
  ...
}

Исправил

На мой взгляд, совсем не уместно - использовать position для выравнивания потока документа. Я использую там, где нужно навести красоту, добавить декора: прилепить иконку к инпуту, приклеить что-то к чему то и т.д.

Паддинг это отступ от содержимого элемента к границе, маргин от границы к следующему элементу.На мой взгляд тут нет четких правил вроде: вот тут можно использовать только паддинг, а вот тут маргин и больше ничего. Использовать на вкус и по макету.
Поиграйтесь сами с разными вариантами, посмотри как что себя ведет, 10 минут практики иногда полезнее нескольких часов зубрежки)
https://webref.ru/ - а тут можно почитать о css.