Как создать адаптивный горизонтальный макет с помощью CSS?

Я работаю в студии креативного дизайна, которая любит ломать парадигмы и условности для создания уникальных макетов веб-сайтов, и недавно мы начали разрабатывать горизонтальные макеты веб-сайтов. Хотя горизонтальные макеты веб-сайтов выглядят «круто», мне еще предстоит выяснить, как сделать их плавными и отзывчивыми, как вы можете сделать с веб-сайтом с вертикальной сеткой из -из -поля -.

Обычно для вертикального веб-сайта с контейнером у вас будет процентная ширина элемента контейнера, а затем установите максимальную ширину -. Благодаря адаптивному макету ваш контент бесконечно прокручивается за пределы страницы,он может различаться по ширине, особенно если контент уникален, и поэтому формула target/context *100 на самом деле не работает (или работает? ).

Возможно, есть способ иметь адаптивную высоту, отступы и поля для элементов, чтобы они работали так же, как и адаптивный веб-сайт на основе сетки. Я не против использования Javascript, но исправление CSS было бы идеальным.

Для справки пример типа макета, который я пытаюсь создать: