По умолчанию 1 колонка, дальше растёт.
-------------------------------------------------------------------------- */
.cols {
display: grid;
gap: var(--row-gap);
grid-template-columns: 1fr;
}
/* Без min-width:0 элемент сетки не сжимается меньше своего контента
(CSS Grid blowout) и выталкивает всю страницу в горизонтальный скролл. */
.cols > *,
.cols-products > * { min-width: 0; }
@media (min-width: 576px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Сетка товаров: 2 в ряд на мобильных, 3 на планшете, 4 на десктопе */
.cols-products {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 768px) {
.cols-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 992px) {
.cols-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* --------------------------------------------------------------------------
STACK — вертикальный ритм между прямыми потомками
Замена повторов вида
внутри секций
-------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }
.stack-2 { --stack-gap: 1rem; }
.stack-3 { --stack-gap: 1.5rem; }
.stack-4 { --stack-gap: 2rem; }
.stack-5 { --stack-gap: 2.5rem; }
.stack-6 { --stack-gap: 3rem; }
.stack-7 { --stack-gap: 4rem; }
.stack-8 { --stack-gap: 5rem; }
.stack-9 { --stack-gap: 6rem; }