/*
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */
.grid {
	display: grid;
	grid-template-columns: repeat(
		var(--grid-placement, auto-fill),
		minmax(var(--grid-min-item-size, 16rem), 1fr)
	);
	gap: var(--gutter, var(--space-m-l));
}

.grid[data-rows='masonry'] {
	grid-template-rows: masonry;
	align-items: start;
}

.grid[data-layout='50-50'] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(16rem, 50vw, 26rem);
}
.grid[data-layout='33-33-33'] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(18rem, 27vw, 26rem);
}
