Добрый день,

Есть карточка товара WooCommerce, которая сделана с помощью конструктора Crocoblock.
На десктопной версии есть Главное изображение товара, и второстепенные картинки товара в виде галереи находятся слева от Главной картинки.
Это отображение верное, ничего менять не нужно.
Это выглядит так:
https://yadi.sk/i/Hv1aDNip-ocy_w

На мобильной версии галерея второстепенных картинок отображается под Главной картинкой товара.
На данный момент это выглядит так:
https://yadi.sk/i/i6RjRZczKC6o1A

Нужно сделать, чтобы это выглядело так:
https://yadi.sk/i/EpIwVfgSEtIxDQ

Если второстепенных картинок в галерее меньше 6, то есть от одной до пяти, то галерея должна быть привязана к центру Главной картинки, отступы те же.
Должно выглядеть так:
https://yadi.sk/i/Rviu0w7ttD3RdA

Еще раз:
Изменение положение галереи второстепенных картинок относительно Главной картинки товара в десктопной и мобильной версиях уже есть и работает, это делать не нужно.
Менять стили десктопной версии не нужно, уже все есть и работает.

Нужно добавить стили только в мобильной версии, чтобы все выглядело аккуратно, так как на референсе.
Должно работать с количеством картинок от 1 до 6.