Чистая вёрстка html, css, bootstrap без JS (!!!)

Всем привет,

Необходимо заверстать несколько экранов под мобильные устройства, используя только html, css, bootstrap.

Объём работы можете оценить по этим макетам:

https://www.figma.com/file/pmOkzuoGbs7tBMp1K0a6Xw/Quiz?type=design&node-id=29-953&mode=design&t=9Spw07TH6fDtkp5O-0

Что важно:

1) использовать js фреймворки НЕ нужно (делаем вёрстку без реакта, вью и т.п.), js мы прикрутим сами

2) основная задача сверстать адаптивную вёрстку под мобильные устройства html, css, bootstrap

3) для десктопа данные экраны должны просто быть по центру страницы (или ещё как-то на усмотрение исполнителя). В общем десктоп должен быть сделан чисто формально, основной трафик в мобиле, поэтому десктоп не особо нужен, но должен быть.

4) есть 2 анимации: спидометр (экран 10) и лоудер (7), необходимо сделать через css

Что мы хотим:

1) Получить чистую вёрстку

2) Дальше разбить её на компоненты

3) Сделать небольшой конструктор который позволит собирать некий “флоу” из этих экранов (!!!), для этого нам собственно и нужна вёрстка этих экранов

4) Мы параметриузуем некоторые стили (например цвета, скругления и т.п.) и будем в своём конструкторе менять эти стили как считаем нужным

5) Важно сделать так, чтобы в заголовках и текстовках мы могли вмещать разное кол-ва текста (например заголовок из 3 строчек и 1 строчки и при этом вёрстка не разъезжалась по швам - несколько примеров приложил в фигме)