Атомный дизайн и медиа-запросы - как бы вы его структурировали?

Question

Фон:

Я начинаю новый проект, и он структурирован с использованием атомарной архитектуры, например:

1. / атомов
2. / молекулы
3. / организмы
4. / шаблоны
5. / страницы

Корень:

• Мой корень - это Компонент Маршрутизатора, завернутый с Провайдером (от Mobx)
• каждый <Route> обернут Loadable Компонент (для ленивой загрузки)
• каждый <Route> оказывает page который содержит разные организмы (а иногда и молекулы).

Код для корневого файла - index.jsx:

ReactDOM.render(
    <Provider ...stores>
      <Router />
    </Provider>
);

Страницы:

Каждая страница создается с использованием шаблонов и содержимого (организмов, молекул и атомов).

Вопросы:

• Каким образом вы использовали медиа-запросы здесь?
• Каким образом вы структурировали страницу?

Я только запускаю это приложение и хотел бы услышать от вас опыт работы с этой архитектурой в React и то, как вы управляете ею.