Ankhena

Модификатор не может быть единственным классом, он всегда сопровождает класс блока или элемента.
Иначе он перестанет быть модификатором в прямом смысле этого слова.

Кнопка submit отправит все данные, у которых есть name.
Но:
1. Если у разных инпутов будет одинаковое name, то придет массив, а не отдельные значения.
Для отдельных значений нужны разные name.
2. Для кнопки отправки удобнее использовать button, а не input. Проще будет стилизовать.

Потому что вы пишете на чистом CSS, т.е. как перечислили селекторы, так и будет.
Если начнете пользоваться препроцессорами, то можно будет писать так:

.single__text-over {
  его свойства

  h2,h3,h4,h5,h6 {
  свойства для заголовков
  }
}

Такой код разложится в то, что вам хочется.

Адаптируйте для своих нужд https://jsfiddle.net/452cpvxz/

Нет размера, блок 0х0 => вы не видите фон.
А размера нет, потому что в css нужно задавать единицы измерения для размеров.

Радиальные градиенты css.yoksel.ru/radial-gradients

#ямыnginx,
цвет и размеры первые попавшиеся

linear-gradient под нужным углом и вперед. Размеры рассчитайте как нужно.
https://jsfiddle.net/kqats0py/ тут размеры просто так, первое что в голову пришло.

При адаптивной верстке довольно часто есть потребность сложить картинку в контейнер. Особенно, если те, кто будут вставлять картинку не хотят или не могут следить за пропорциями.
Можно взять для этих целей div. Но div безликий тег и поэтому берут семантически соответствующий figure.

Правильная структура для вашего случая

скрытые инпуты
<div>
   лейблы
</div>
<div>
   блоки с контентом вкладок
</div>

так вы сможете написать селекторы ~

Потому что содержимое флексов выравнивается вдоль главной оси свойством justify-content, а не text-align

https://jsfiddle.net/2s47rko3/
Нужно изменить тип тега (если я правильно расшифровала желания). Если нет, то нарисуйте результат.

Если разбивать по строкам, то так


Если не разбивать, то будут видны полоски.

Из CSS получает getComputedStyle

var obj1 = document.getElementById('test1');

if (getComputedStyle(obj1).display == 'none') {
document.getElementById('rezult1').innerHTML = "Скрыто";
}

Держите https://jsfiddle.net/bh0pvcw5/

<meta name="viewport" content="width=device-width, initial-scale=1">

забыли