BigKompot

Да, можно:

$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  $padding: 4px;

  div {
    padding: $padding; // 4px
  }
}

Главное не запутаться :-)

Возможно лучшим решением будет не менять исходное значение, а производить вычисления:

$padding: 8px;

div {
  padding: $padding; // 8px
}


@media (min-width: $screen-tablet) {
  div {
    padding: ($padding - 4); // 8 - 4 = 4px
  }
}

В head:

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

Margin и padding в em всегда рассчитываются от размера шрифта своего элемента по формуле:

margin(em) = margin(px) / font-size(px)

где font-size(px) — вычисленное значение размера шрифта. Хотя сам размер шрифта может быть задан в любых единицах измерения или может быть унаследован от любого своего родителя.

Когда у цепочки родителей задан размер шрифта в em, очень легко запутаться со всеми этими пересчетами. Ориентируйтесь на вычисленное значение, которое можно посмотреть в инструментах разработчика в браузере (см. правую колонку).

Ctrl+C попробуйте

Добавить к первому тэгу option атрибут selected

<option disabled selected>Выберите клинику</option>

https://jsfiddle.net/r52L4nnu/

Советую сделать у родителя:

{
  display: flex;
  flex-wrap: wrap;

у изображения:

{
  width: 300px;
  height: 300px;
  flex: 1 0 auto;
  object-fit: cover;
}

так у вас будет галерея с фотографиями одинакового размера

Axure RP Pro

1) Шаблонизаторы - например Jade
2) Плагины для сборщика - например gulp-rigger

В практике верстки давно уже существует понятие препроцессоров, возьмем к примеру связку gulp /sass. В gulp используем плагин gulp-rigger, благодаря которому имеем: header.html и footer.html, которые подключаем на нужные страницы с помощью команды:

//= template/header.html

стили с помощью sass, а именно правила 7 к 1, прописываем один раз к примеру в файле header.scss и footer.scss. И не важно сколько у вас страниц, вы один раз прописали все это и верстаете себе, это касается не только header и footer, это можно использовать с любым повторяющемся блоком.
Знакомьтесь с препроцессорами и удачи.

.main li:not(:last-child) a:after{
    position: relative;
    color: #fff;
    content: " | ";
    display: block;
}

Так ведь вы же в конце watch запускаете - вот он и следит за изменениями в файлах, а для этого скрипт, разумеется, должен быть запущен. Скорее всего, вы просто забыли обернуть watch в отдельный task и вызывать его только тогда, когда нужно.

Инициализировать sourcemaps нужно перед изменениями файлов, чтобы объект sourcemaps получал в себя информацию об изменениях, которую впоследствии запишет.

Должно быть так:

gulp.task('styles', function () {
  return gulp.src('frontend/**/*.css')
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(concatCss('all.css'))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(minifyCss('all.css'))
    .pipe(rename('all.min.css'))
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulp.dest('public/css'));
});

Копировать исходники на сайт не нужно, вся необходимая информация содержится в самом sourcemap. Советую писать soucemap не в сам файл со стилями, как у вас, а в отдельный файл (чтобы all.min.css был полегче).
Вот так: sourcemaps.write('./maps')

Прописываются они точно так же.
iPad горизонтальный и вертикальный режимы:

@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px) { ...}

iPad mini:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {...}

Если у вас не mac os, возьмите виртуалку, под vmware player, с образом mac os, поставьте xcode, в ней можно запустить симулятор iPad и смотрите, что сломалось.

Этим занимаются постпроцессоры. Например, gulp-combine-media-queries