dom1n1k

Это очень легко делается в картографических апи - как минимум в Leaflet и Яндексе, наверное и в каких-то ещё можно.
Главная трудность тут подготовить тайлы - то взять картинку во всех нужных масштабах, аккуратно нарезать их на куски и корректно пронумеровать.
Есть и узкоспециальные плагины для подобного просмотра фото, но те что я видел, мне не очень нравились.

Задавал аналогичный вопрос: Как это сверстать?
Насколько я вижу, в общем случае "красивого" решения на флексе нет.
Нужно либо фиксировать высоту контейнера, либо изгаляться с костылями.

В принципе, calc тут нормальное решение. С учетом префиксов, он покрывает почти все браузеры. А для немногочисленных остальных - легко и просто фолбечится (будет менее красиво, но приемлемо). А флекс фолбечится более трудоемко и намного менее надежно (если вам действительно нужные старые браузеры).

> как я понял их много
Вообще в природе может и много, но по факту более-менее популярен только один-единственный - бывший Jade, ныне переименованный в Pug.
Использовать ли его - вопрос холиварный. Некоторые люди от него в восторге. Некоторые, включая меня, остались не очень довольны.
Надо пробовать самому.

Оптимально будет забить на оценку и оставить GF как есть.
Скачивать и класть себе на хостинг - в реальности будет хуже.
Но хозяин барин.

Всегда делаю так

.elem + .elem {
   margin-top: 20px;
}

В 2017 году всё-таки флекс-бокс. Уже можно :)
Без всякий хрени с дополнительными технологическими обертками.

Ну как написали умные люди в уже вышедших статьях, "гриды для двумерной раскладки, флекс для одномерной".
Двумерка во флексе сделана неважно - это чистая правда.

Прежде чем это верстать, нужно выяснить у дизайнера, как вся эта красота должна тянуться и адаптироваться (и должна ли вообще?) Например, что должно происходить с перемычкой между серыми блоками?
Сейчас задача не имеет внятного решения, потому что неясен результат, который нужно получить.

Лучше всего градиентом с нулевой шириной перехода.

Имею опыт глубокой кастомизации Бутстрапа. Глупая была затея.
Родился такой монстр, который просрал плюсы и сочетал минусы обоих подходов (популярный фреймворк vs самописный велосипед).
Сильно изменив Бутстрап, убиваются:
- его обновления и багофиксы
- совместимость со сторонними плагинами
- низкий порог вхождения новых людей
- возможность гуглить решения в случае багов
Но и самописным велосипедом это тоже не является, потому что сильно завязано на исходную архитектуру. То есть нет полной свободы и гибкости, присущей кастомным решениям. БЭМ-ом там, конечно, тоже не пахнет, откуда идут большие проблемы с независимостью.
Бутстрап нужно использовать либо как есть, либо с минимальными скинами-стилизациями поверх.

Нет единого правила, от ситуации и от желаемого результата зависит всё.
Кроме того, сейчас всё шире используются calc-выражения, где смешаны единицы двух, а иногда и даже более, типов.

Ну это только делать карту физически больше с двух сторон и накрывать плашками соответствующих цветов с вырезами (делаются картинками) через z-index. Костыль, неудобно и всё такое - но иначе никак. Дизайнер, рисуя свой шэдэвор, не знал как это потому будет реализовываться.
Либо поговорить с дизайнром/заказчиком и попытаться найти компромисс, сделав например эти кнопки не прозрачными, а залить каким-то цветом.

В >99% случаев - JS.
Чистый CSS сильно урезан по возможностям и подойдет только для чего-то очень простого и второстепенного.

гуглить по словам "sticky footer" - вопрос обсосан сотни раз

Такие вещи делаются картинками.