/**
 * grid.css
 *
 * Custom grid styles as needed.
 */

[class*="grid-"] {
	display: grid;
	padding: 0;
	gap: 1rem;
}

[class*="grid-"] > * {
	display: block;
	list-style: none;
	width: 100%;
}

@media screen and (min-width: 400px) {
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 768px) {
	.grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grid-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (min-width: 1024px) {
	.grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}