dom1n1k

Видимо, только картинками по бокам.
В принципе, есть ещё способ с двумя псевдоэлементами, которым дается тень, а потом они смещаются и слегка поворачиваются - но это капризный метод. Чтобы он нормально работал, к тени предъявляется куча требований - она должна быть небольшой, спадать равномерно, сверху не слишком вылазить... На макете это не так.
Так что настоятельно советую не мудрить чрезмерно.

Иконки разного размера?

Можно ли вообще ставить line-height меньше 1?

В принципе можно, но в 99,9% случаев не нужно.
Исключение составляют некоторые очень редкие и специфичные ситуации.

Судя по вопросу

как вообще высота текста может быть 13 пикселей, если размер шрифта 18 пикселей?

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

почему бы не использовать комбинацию флексбокс сетка + flexibility?

А вот за это я бы отбивал руки. Категорически нельзя завязывать лейаут на JS. Это медленно, это бажно, это... это медленно!

Если человек сидит на старом IE (сам по себе очень медленный браузер), то у него с высокой степенью вероятности и компьютер слабый. Далее, у них скорее всего не установлены адблокеры - это ещё куча тормозов. Уж если вы по каким-то причинам решили, что эти пользователи вам нужны - зачем над ними издеваться?
Тут блин на мощном ПК с самым последним браузером порой раздражаешься оттого, что какая-то прилипающая панелька лагает... А если весь-весь лейаут будет отрисовываться JS в IE - это вешалка.

Я помню времена, когда CSS3 (скругления, тени, градиенты...) только недавно вышел и естественно IE этого ничего не поддерживал. Довольно быстро сообщество наплодило вагон полифилов для этого дела. Были и маленькие, под одну функцию, были и целые пакеты.
Так вот: они нормально работали только в демках и простеньких случаях. В реальных сложных сайтах пользоваться было невозможно - всё дико тормозило, да и глючило. Нельзя IE чрезмерно нагружать тем, на что он не предназначен.

Degradation должна быть gracefull, а не lazy.

Сайты - целесообразно всегда.
Нецелесообразно тащить БЭМ в небольшие изолированные фрагменты кода - например, наброски proof of concept, когда нужно просто быстро проверить/продемонстрировать идею. Ответы на Тостере сюда тоже можно отнести. Если же говорить именно о сайте, то есть законченном продукте (пусть даже и небольшом) - БЭМ как минимум не повредит. Сегодня я бы уже не стал верстать без БЭМ-а ничего, что содержит хотя бы 10 классов.

P.S. Я сам всегда скептически отношусь к хайпам по поводу всех новых и жутко модных технологий, но БЭМ это реально полезная штука. Да и не такая уж новая - фрагментарно его идеи мелькали уже давно, в том числе в моих собственных верстках. Но нужен был локомотив, который их систематизирует и раскрутит.

P.P.S. Разумеется, речь идет о самой методологии именования классов, а не всех библиотеках-космолетах, что Яндекс родил на эту тему - то уже на любителя.

Видимо потому, что по спецификации дефолтное значение ширины у любого элемента (включая блоки) - auto, а отнюдь не 100%. У картинки auto свое, у текстового потока свое. Но никто не мешает прописать 100% вручную.

htmlbook.ru/css/word-break