Сверстать макет на Bootstrap 5

Здравствуйте. Макет: www.figma.com/design/ODSP...

Требования
• Bootstrap 5
• Мобильное меню должно перестраиваться из основного (в коде не дублируются одни и те же ссылки)
• Адаптивная вёрстка: в фигме макеты
• Выпадающее меню на кнопке «Каталог»
• SVG-иконки вставлять через <img src=”…”>
• Фото товара по клику увеличиваются (Lightbox или что-то вроде того)
• Слайдер картинкой
• Кнопка каталог — по наведению раскрывается (иконка на кнопке меняется с бургер меню на крестик), по клику переход по ссылке (на мобильном тоже самое, но раскрытие по клику на стрелочку вниз). 
• Страница марки — тэги перед товарами изначально свёрнуты до 1 строки, по нажатию раскрываются, текст ссылки меняется на "свернуть модели"
• Такой же механизм сворачивания/раскрытия на Страница марок, только там ограничено 5 строками
• Города в шапке — выпадающий блок по наведению
• Блок Карточка товара — сверстать по 12-колоночной сетке: 
Картинка = .col-lg-1
Артикул = .col-lg-2
Вид фильтра = .col-lg-2
Название = .col-lg-2
Товар в наличии  = .col-lg-1
Количество = .col-lg-2
Кнопка  = .col-lg-2

Если будут вопросы, готов ответить.