@import '../mixins/breakpoints';

%grid-shared {
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: repeat(var(--columns), 1fr);
}

@for $cols from 1 through 12 {
	.grid-#{$cols} {
		@extend %grid-shared;

		--columns: #{$cols};
	}
}

@for $cols from 1 through 12 {
	.span-#{$cols} {
		grid-column: auto / span #{$cols};
	}
}