fregire

Вот полностью бесплатный сервис makemail.ru , там можно верстать письмо и тестировать в различных почтовых системах.

<div class="page__wrapper">
      <header class="header page__header">
        <div class="header__left-content">
          <div class="logo">
            <!-- Logo -->
          </div>
        </div>
        <div class="header__right-content">
          <ul class="nav">
            <!-- Li -->
          </ul>
          <div class="header__search">
            <!-- Input -->
          </div>
        </div>
      </header>
    </div>
  </div>

Все это можно сделать с помощью миксов, а не через модификатор, т.к через модификатор настраивается внешний вид, а не позиционирование.

Самое сложное было придумать селектор для блока ))
https://codepen.io/delphinpro/pen/xYJxgN?editors=1100

Погуглите "аккордеон jquery" , куча примеров будет

dev-ithard.com там ниже есть похожий блок. Гляньте, возможно вам поможет

Могу посоветовать использовать в таком случае старый добрый Bootstrap. Там можно использовать container-fluid с бэкграундом такой картинки, и 2 row с колонками. попробуй использовать 24х колончатую версию будет легче позиционировать согласно макету.

Задача нифига не тривиальная и с наскока не решилась. В итоге зашел в тупик https://jsfiddle.net/j3znd5hq/ , надо делать заново и по-другому, но это уже лень. По крайней мере посмотрите как не надо делать.

для ие8+ буцтрап 3 и флоаты, но медиазапросы не работают в ие8, так что сайт не получится респонсивным

нет

Ну если на каком-то проекте вам понадобится, уделите вечер и изучите.

см. разжевано