/**
 * JSD Collection Section
 *
 * Layout only. Section chrome comes from section.css and the tiles style
 * themselves; this file just decides how many fit on a line.
 *
 * Compact rows run four-up on desktop and hold two columns all the way down to
 * a small phone — dropping to one would turn a scan into a scroll. The
 * editorial row is three-up and goes to one column early, because three
 * recommendations shown one at a time still read as a recommendation.
 */

.jsd-collection-grid {
	display: grid;
	grid-template-columns: repeat(var(--jsd-collection-cols, 4), minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

/* The curated row gets more air between tiles than the dense rows do. */
.jsd-section--collection-editorial .jsd-collection-grid {
	gap: 28px;
}

@media (max-width: 1200px) {
	.jsd-collection-grid {
		gap: 18px;
	}
}

@media (max-width: 1024px) {
	.jsd-collection-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.jsd-section--collection-editorial .jsd-collection-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.jsd-section--collection-editorial .jsd-collection-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

@media (max-width: 599px) {
	.jsd-collection-grid {
		gap: 12px;
	}
}

/*
 * Below this the two columns stop being readable rather than merely tight, so
 * the row folds to one.
 */
@media (max-width: 339px) {
	.jsd-collection-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}