Mixin Partial

_mixins.scss

@mixin gridSection {
	display: grid;
	grid-template-columns: $size__mobile-grid;

	@include media(tablet) {
		grid-template-columns: $size__tablet-grid;
	}

	@include media(desktop) {
		grid-template-columns: $size__desktop-grid;
		max-width: $size__max-site-width;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
	}
}

@mixin regularContentMaxWidth() {
	grid-column: 2 / -2;

	@include media(desktop) {
		grid-column: 4 / -4;
	}
}

@mixin wideContentMaxWidth() {
	grid-column: 2 / -2;

	// Optional to have two wide width views. 
	// I normally don't use this second option
	@include media(desktop) {
		grid-column: 3 / -3;
	}
}

@mixin fullContentMaxWidth() {
	grid-column: 1 / -1;
}