zooks

Это делается на серверной стороне - через скрипты или CMS.

2) Заменить на Slick carousel, там встроена функция lazy loading.

С реального проекта:

.wrapper {
    padding-top: 15px;
    background: url("img/bg-top.jpg") repeat-x center top;
}

В Google Chrome наиболее приближен к реальному вид на мобильных устройствах.
Вызывайте на F12.

Если формат Jpeg, то он добавляет шарпа, т.е. резкости при каждом сохранении.

Убедитесь, что в миксине указан return.

Да, есть смысл. Минимальное разрешение 320px - стандарт.

Особенно если заказчику надо, чтоб адаптация достигалась с помощью медиазапросов аж от 1920px

Ответ - mobile first.

efimov.ws/main/develop/modx.html
modx.ws/blog/uroki-modx-revolution
https://habrahabr.ru/post/122289/

Sublime Text и Sublime-HTMLPrettify.

Делал респонсив таблицы как раз по этому примеру - пришлось переписать скрипт, чтобы он покрывал все таблицы.
Если хочется чего-то попроще, то можно просто сделать горизонтальную прокрутку при переполнении.

В чем проблема прописать стили самостоятельно? Форма тривиальная.

Сайта нет, похоже на самопис на PHP.

Это происходит из-за margin в .header--logo

Начал верстать на bootstrap

Он нужен для макетирования, не для нормальной верстки.

Mobile First у вас в принципе нет. Почитайте про наследование в CSS.

Выставляйте display: none, font-size: 0px - это какое-то читерство в SEO.

Потому что он не знает тега main.
Добавьте в CSS:
main { display: block; }

Добавьте в начало файла:
@charset "UTF-8";