Антон

Сделать паддинг слева тексту, иконка абсолютом на то место, что мы отвели паддингом. Блок текста релейтив, иконка абсолют

material icons
...больше не вспомню пока

clip path или линейный градиент

Вот всегда интересно было:
Почему вы не ***е своих дизайнеров за такие макеты, жестоко ногами?
https://codepen.io/anon/pen/QPELBL

Если шапка и футер везде одинаковые, зачем их каскадить? Они идут как независимые блоки, вот , вот footer, везде одни и те же, ну и всё, оставьте как есть.

Если блок не зависит от родителя и он повторяемый, дайте ему "собственное" имя со своими собственными "потомками", и повторяйте везде, где хотите

Потому что сайт закончился, было бы в контенте больше блоков, было бы нормально

А этот популярный специалист что делал пока флексов и гридов не было, таблицами верстал?
Если инструмент справляется со своей задачей, зачем его в чем-то упрекать?

Колонки - проценты от контейнера.
Контейнер lg - 1170 по дефолту. Можете поменять, конечно, но проще будет ввести еще один брейкпоинт xl, дополнить медийки, и всё.

https://www.browserstack.com/
Дает более всех остальных нормальную картину по яблочным продуктам.
Тест в браузере ничего не даст, т.к. кроме подстановки юзерагента он ничего более предложить не может.

Вычислить ширину блока, вычислить ширину экрана. Если ширина блока выше ширины экрана, тогда вешать необходимое, будто то скролл, оверфлоу или инициализация слайдера

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