/**
 * Блок «Форматы размещения» под каталогом (KOY-2508).
 *
 * Сами карточки — компонент главной .sm-shortcuts, он описан в hero.css и
 * здесь не переопределяется. В этом файле только раскладка секции: отступы
 * и поведение ряда, когда карточек не восемь, как на главной, а от одной
 * до шести.
 */

.sm-formats {
	padding-top: 60px;
}

.sm-formats__title {
	margin-bottom: 26px;
}

/*
 * На главной восемь карточек делят ширину поровну (flex: 1 1 0). Здесь их
 * может быть две — и они разъехались бы по краям экрана. Поэтому ряд прижат
 * влево, карточка держит ширину колонки макета, а лишние переносятся.
 */
.sm-formats .sm-shortcuts {
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 24px;
}

.sm-formats .sm-shortcuts__item {
	flex: 0 0 auto;
	width: 146px;
}

@media (max-width: 1024px) {
	.sm-formats {
		padding-top: 40px;
	}

	/* Ширина кружка мобильной ленты — из zz-mobile.css, чтобы ряд не поехал. */
	.sm-formats .sm-shortcuts__item {
		width: 96px;
	}
}