$bp-md: 45em;
$bp-lg: 65em;
$max-column-count-md: 2;
$max-column-count-lg: 4;
$gap: 1.5rem;
$max-width: 87.5rem;
$hspace: 2rem;
.grid-container {
	display: grid !important;
	gap: $gap;
}

.grid-center {
	width: min(100% - #{$hspace}, #{$max-width});
	margin-inline: auto;
}

// .grid-item {
// 	outline: 1px solid blue;
// }

@media (min-width: $bp-md) {
	.grid-container {
		grid-auto-flow: column;
	}

	@for $i from 1 through $max-column-count-md {
		.grid-container .grid-item:nth-child(#{$max-column-count-md}n + #{$i}) {
			grid-column: $i;
		}
	}
}

@media (min-width: $bp-lg) {
	@for $f from 1 through $max-column-count-lg {
		.grid-container .grid-item:nth-child(#{$max-column-count-lg}n + #{$f}) {
			grid-column: $f;
		}
	}
}