/* -------------------------------------------------------------------------
   7.1 Grids
   ------------------------------------------------------------------------- */

.tg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4) var(--space-3);
}

.tg-grid--artists {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Small screens: 2 artists per row, like the works */
@media (max-width: 639px) {
	.tg-grid--artists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3) var(--space-2);
	}
}

/* Artwork grids: 1 / 2 / 3 per row, larger cards
   (artist page, home, /artworks/, categories) */
.tg-grid--artworks {
	grid-template-columns: 1fr;
	gap: var(--space-5) var(--space-4);
}

@media (min-width: 640px) {
	.tg-grid--artworks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.tg-grid--artworks {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Justified rows (artist page, home): same height per row, images never cropped.
   main.js balances the rows and sets each card's width ([data-justified]).
   Without JavaScript: each card starts at the target row height (width =
   ratio x height), as many as fit go on a row, then they grow in proportion
   to their ratio. --row-height must be in rem (read by main.js). */
.tg-grid--justified {
	--row-height: 11rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-2);
}

/* Filler: the last row keeps the target height instead of being stretched */
.tg-grid--justified::after {
	content: "";
	flex: 999 1 0;
}

@media (min-width: 640px) {
	.tg-grid--justified {
		--row-height: 15rem;
		gap: var(--space-4) var(--space-3);
	}
}

@media (min-width: 1000px) {
	.tg-grid--justified {
		--row-height: 20rem;
	}
}