Кирилл Абдулов

Существует набор стандартных элементов форм <button>, <input>, <object>, <select>, <textarea>
Браузеры умеют отправлять их содержимое на сервер при отправке формы.

Если ты хочешь отправить что-то нестандартное, то можешь либо добавить скрытые поля типа input[type=hidden] или собрать данные для post-запроса самостоятельно в объект или в FormData и отправить через fetch или xhr

Разумнее подход mobile-first.
Все media пишутся по min-width начиная от меньшего.
Не важно, что макет у вас только десктопный. Напрягитесь и пересчитайте.
Доля мобильного трафика больше, чем десктопного.

Если всё же desktop-first, то по max-width в обратном порядке, начиная с большей ширины.

Сами media пишутся внизу файла css, если вы не разбиваете файлы на блоки.
Возможно, вам удобнее писать media прямо под селектором.
Тогда при сборке хорошо бы прогнать файл через плагин группирующий media условия и ставящий их вниз файла.

Если вам нужен !important, то скорее всего в основной части использована слишком большая вложенность селекторов. А потом пишете простой селектор или селектор с меньшим весом.
Прочитайте про специфичность селекторов и/или упростите код.

Остальное на конкретном примере.