<style>
:root {
/* Десктоп от 1200px */
--gridDesktop: 1fr 1fr 1fr 1fr 1fr; /* Сетка: 5 колонок */
--gapDesktop: 10px 10px; /* Отступы между карточками: вертикаль 10px, горизонталь 10px */
--heightImgDesktop: 240px !important; /* Высота изображения в карточке на десктопе */
/* Мобильные устройства от 320px до 1199px */
--gridMobile: 1fr 1fr; /* Сетка: 2 колонки */
--gapMobile: 10px !important; /* Отступы между карточками */
--heightImgMobile: 160px !important; /* Высота изображения на мобильных */
--fontSizeTitleMobile: 20px; /* Размер заголовка товара */
--fontSizeDescrMobile: 14px; /* Размер описания товара */
--fontSizePriceMobile: 14px; /* Размер цены */
--fontSizeOldPriceMobile: 10px; /* Размер старой цены */
}
/* Удаляет лишний псевдоэлемент Tilda */
.js-store-grid-cont:before {
display: none;
}
/* Растягивает карточку на всю высоту */
.t-store__card__wrap_all {
height: 100% !important;
}
/* Убирает разделитель между строками */
.t-store__grid-separator {
display: none;
}
/* Обнуляет внешние отступы у карточек */
.js-product:not(.js-product-relevant),
.t-store__stretch-col {
width: 100% !important; /* Растягиваем на всю ширину */
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Стили для десктопа (от 1200px) */
@media (min-width: 1200px) {
.js-store-grid-cont {
display: grid !important; /* Включаем CSS Grid */
grid-template-columns: var(--gridDesktop); /* Используем сетку из 5 колонок */
grid-gap: var(--gapDesktop); /* Отступы между карточками */
padding-left: 120px !important; /* Отступ слева от края экрана */
padding-right: 120px !important; /* Отступ справа от края экрана */
max-width: 100% !important;
box-sizing: border-box; /* Учитываем padding в общей ширине */
}
.t-store__card__imgwrapper {
height: var(--heightImgDesktop); /* Задаём высоту картинки */
padding-bottom: 0 !important;
}
}
/* Стили для мобильных устройств и планшетов (до 1199px) */
@media screen and (max-width: 1199px) {
.js-store-grid-cont {
display: grid !important;
grid-template-columns: var(--gridMobile); /* 2 колонки */
grid-gap: var(--gapMobile); /* Отступы между карточками */
padding-left: 35px !important; /* Отступ слева */
padding-right: 35px !important; /* Отступ справа */
max-width: 100% !important;
box-sizing: border-box;
}
.t-store__card__imgwrapper {
height: var(--heightImgMobile); /* Высота изображения */
padding-bottom: 0 !important;
}
.js-store-prod-name {
font-size: var(--fontSizeTitleMobile) !important; /* Заголовок товара */
}
.js-store-prod-descr {
font-size: var(--fontSizeDescrMobile) !important; /* Описание товара */
}
.t-store__card__price {
font-size: var(--fontSizePriceMobile) !important; /* Цена */
}
.t-store__card__price_old {
font-size: var(--fontSizeOldPriceMobile) !important; /* Старая цена */
}
}
</style>