@use "sass:map";
@use "../partials/breakpoints";

[role="grid"] {
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	display: grid;
	grid-template-columns: 1fr;

	@media (min-width: map.get(breakpoints.$breakpoints, "medium")) {
		grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
	}
	@media (min-width: map.get(breakpoints.$breakpoints, "large")) {
		grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
	}
}