/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-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-fit),
		minmax(var(--grid-min-item-size, 16rem), 1fr)
	);
	gap: var(--space-s);
}

/* A split 50/50 layout */
.grid[data-layout="50-50"] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(16.5rem, 47%, 27rem);
}

/* Three column grid layout */
.grid[data-layout="thirds"] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(17rem, 30%, 25rem);
}