Ankhena

1. Есть тег <picture> для показа разных изображений на разных экранах
2. height: auto для пропорций
3. позиционирование
4. object-fit для правильной обрезки, аналогичной bg size.

Про то, что картинки можно готовить заранее правильных пропорций лучше промолчу.

При наличии этого всего не понятно зачем нужна манипуляция превращения картинок в фон. Разве что кто-то знает js лучше, чем css.

Копать в сторону дублирования меню. Например, дублировать вертикальное. На мелких экранах основное вертикальное скрывать, дополнительное показывать сразу за горизонтальным.

Либо разместить их в коде так, чтобы они имели общего родителя и отзывались на order. Не видя макета это сложно нафантазировать.

Откройте со смартфона https://www.esolutions.se/en-GB/test

1. Перестать верстать таблицами
2. Посмотрите сколько раз меняются шрифты

Используйте нормальный редактор кода с подсветкой, если не умеете самостоятельно следить за окрывающими и закрывающими тегами.
Выделено красным: https://jsfiddle.net/v62d70c0/

Владислав Валабуев: быстрее писать с emmet. На мой взгляд с эммет и без препроцессоров вообще выйдет быстрее, чем с препроцессорами, но без эммет. Лично у меня больше времени уходит на выдумывание имен классов или на размышления как бы обойтись меньшим числом тегов или на вздохи, что дизайнер сделал правые отступы 17 точек, а левые 19, чем на фактическое написание задуманного.

Соотвественно: emmet, livereload и отрабатывать скилы быстро-думанья.

2. Обернуть видео в контейнер

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /* 56.25% задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-wrap iframe,
.video-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 800px;
}

1. и 3. Выложите код в песочницу, уж не первый вопрос тут задаете.

А логику включить?

Чем лучше делать отсупы(margin, padding) — rem или %?

А вы как верстаете? Не глядя в макеты дизайнера вообще?

Сами ответьте на вопрос
В чем вы будете задавать отступы в CSS, если:
1. В макете дизайнера все отступы на всех разрешениях равны 23 пикселям.
2. На десктопе шрифт задан 16px и отступы по 16px, на мобильных шрифт 20px и отступы тоже по 20px.
3. В стайлгайде написано человеческим языком: делай отступы 3% от ширины блока.
4. Тоже самое, но делай отступы в 2 символа.

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

1. Геометрию.
2. media условия
3. немного JS/JQ
4. оптимизицию изображений, отличия графики для ретины

Делать так, чтобы хорошо смотрелось при любом размере окна браузера.

screensiz.es/phone
viewportsizes.com
Также любые сервисы из гугла по запросу "viewport sizes".

И еще не забывать, что десктопный браузер может быть открыт на любой размер.

Без дополнительных блоков и псевдоэлементов
https://jsfiddle.net/1yh48obc/ толщину рамки еще поподгонять надо.

SVG, наверное, будет целесообразнее.