/*------------------------------------------------------------
	Grid (standard and masonry)
	Use --st-grid-cols-desktop, --st-grid-cols-tablet, --st-grid-cols-mobile, --st-grid-gap (inline or inherited).
------------------------------------------------------------*/

.st-grid {
	--st-grid-cols-desktop: 3;
	--st-grid-cols-tablet: 2;
	--st-grid-cols-mobile: 1;
	--st-grid-gap: 1rem;
	--st-grid-aspect-ratio: auto;
	display: grid;
	grid-template-columns: repeat(var(--st-grid-cols-mobile), 1fr);
	gap: var(--st-grid-gap);
}

@media (min-width: 48rem) {
	.st-grid {
		grid-template-columns: repeat(var(--st-grid-cols-tablet), 1fr);
	}
}

@media (min-width: 64rem) {
	.st-grid {
		grid-template-columns: repeat(var(--st-grid-cols-desktop), 1fr);
	}
}

.st-grid--equal-height {
	grid-auto-rows: 1fr;
}

.st-grid--masonry {
	display: block;
	column-count: var(--st-grid-cols-mobile);
	column-gap: var(--st-grid-gap);
}

@media (min-width: 48rem) {
	.st-grid--masonry {
		column-count: var(--st-grid-cols-tablet);
	}
}

@media (min-width: 64rem) {
	.st-grid--masonry {
		column-count: var(--st-grid-cols-desktop);
	}
}

.st-grid--masonry>* {
	break-inside: avoid;
	margin-bottom: var(--st-grid-gap);
}

.st-grid__item {
	min-width: 0;
}

.st-grid .st-card__image,
.st-grid .st-card__placeholder {
	aspect-ratio: var(--st-grid-aspect-ratio, auto);
}

.st-grid .st-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}