Сверстать адаптивную страницу для лендинга

Создать адаптивную вёрстку страницы catalog.html

Для разработки нужно использовать рабочий проект с настроенным билдом (gulp, sass, fileinclude).

На входе вам будет предоставлен доступ в репозиторий на GitHub, работу нужно будет выполнить в указанной ветке. Репозиторий подготовлен, проект запускается. Вёрстка необходима для конкретной страницы, примеры реализации в репозитории есть.

Есть макет в Figma с наличием двух вариантов под десктопную и мобильную версию. Хеадер и футер (выделены красной рамкой) уже реализованы — верстать не нужно, необходимо сверстать только тело страницы.

1. Вёрстка должна быть адаптивной для двух ширин:

- от 0 до 991px — мобильная версия

- от 992px и шире — десктопная версия

1. Все стили описываются в main.sass и media.sass

1. Преимущественно для разметки использовать флексбоксы

1. Все растровые изображения должны быть встроены с помощью lazyload, можно использовать сниппет по аналогии с уже реализованными частями

1. Разметка должна быть логично разбита по блокам с помощью fileinclude, по аналогии с реализованными частями

1. На странице должны быть реализованы интерактивные элементы:

- переключение табы для скриншотов

- блоки "Show more", раскрывающие скрытую часть текста

- карусели для отзывов на slick.js, есть примеры

1. Вёрстка должна быть одинаково рабочей в современных браузерах и будет проверяться в последних стабильных релизах Safari, Mozzila, Chrome. Плюс в Safari/Chrome на iOS и Mozzila/Chrome в Android.

Во вложении скриншоты макета Figma для визуального ознакомления. Реальный макет по запросу.