Адаптивная верстка одной страницы сайта

Имеется одна страница сайта (домашняя страница). Фронтенд написан на Angular 17.0.8. Сама страница имеет несколько секций, а также header и footer. Необходимо изменить код так, чтобы сайт корректно отображался на разных размерах экрана (от смартфонов до ultra wide мониторов).

На данный момент дизайнером разработано две версии сайта -- десктопная и мобильная (дизайн реализован в приложении Figma).

Далее будут кратко описаны секции, которые необходимо будет адаптировать под разные размеры экрана.

То, как выглядит страница, которую нужно адаптировать, есть в приложенном файле.

1) В первой секции есть интерактивный мокап (на нем есть эффект 3D, и он немного меняет свое положение в зависимости от положения курсора пользователя). Он должен изменять свой размер в зависимости от размера экрана пользователя (например, как на этом сайте). Сам мокап ведет себя аналогично мокапу на ранее упомянутом сайте.

2) Во второй секции есть несколько элементов, которые имитируют переписку с использованием голосовых сообщений (при помощи сторонней библиотеки "wavesurfer.js").

3) В третьей секции есть карусель (она реализована стандартными инструментами из "@angular/animations" без использования сторонних библиотек).

В остальных трех секциях содержатся просто списки.

В качестве базы будет предоставлен код рабочего проекта на Angular 17.0.8. При возникновении любых вопросов и/или уточнений будем оперативно отвечать.