// CSS Grid auto layout
.Grid--auto {
	display: grid;
	grid-gap: 2rem;
}

@media screen and (min-width: $medium-breakpoint){
	.Grid--auto {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.Grid-1-3 {grid-template-columns: 1fr 3fr;}
.Grid-3-1 {grid-template-columns: 3fr 1fr;}

// 12 Column grid w/ css grid
.Grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 0.5rem;
}

.g-1-12 {grid-column: span 1;}
.g-2-12 {grid-column: span 2;}
.g-3-12 {grid-column: span 3;}
.g-4-12 {grid-column: span 4;}
.g-5-12 {grid-column: span 5;}
.g-6-12 {grid-column: span 6;}
.g-7-12 {grid-column: span 7;}
.g-8-12 {grid-column: span 8;}
.g-9-12 {grid-column: span 9;}
.g-10-12 {grid-column: span 10;}
.g-11-12 {grid-column: span 11;}
.g-12-12 {grid-column: span 12;}

@media screen and (min-width: $medium-breakpoint){
	.g-1-12__m {grid-column: span 1;}
	.g-2-12__m {grid-column: span 2;}
	.g-3-12__m {grid-column: span 3;}
	.g-4-12__m {grid-column: span 4;}
	.g-5-12__m {grid-column: span 5;}
	.g-6-12__m {grid-column: span 6;}
	.g-7-12__m {grid-column: span 7;}
	.g-8-12__m {grid-column: span 8;}
	.g-9-12__m {grid-column: span 9;}
	.g-10-12__m {grid-column: span 10;}
	.g-11-12__m {grid-column: span 11;}
	.g-12-12__m {grid-column: span 12;}
}

@media screen and (min-width: $large-breakpoint){
	.g-1-12__l {grid-column: span 1;}
	.g-2-12__l {grid-column: span 2;}
	.g-3-12__l {grid-column: span 3;}
	.g-4-12__l {grid-column: span 4;}
	.g-5-12__l {grid-column: span 5;}
	.g-6-12__l {grid-column: span 6;}
	.g-7-12__l {grid-column: span 7;}
	.g-8-12__l {grid-column: span 8;}
	.g-9-12__l {grid-column: span 9;}
	.g-10-12__l {grid-column: span 10;}
	.g-11-12__l {grid-column: span 11;}
	.g-12-12__l {grid-column: span 12;}
}

// https://dreamhost.github.io/dreamhost.css/grid/

.g-1_6 { float: left; display: block; margin-right: 2.35765%; width: 14.70196%; }
.g-1_6:last-child { margin-right: 0; }

.g-1_4 { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; }
.g-1_4:last-child { margin-right: 0; }

.g-1_3 { float: left; display: block; margin-right: 2.35765%; width: 31.76157%; }
.g-1_3:last-child { margin-right: 0; }

.g-1_2 { float: left; display: block; margin-right: 2.35765%; width: 48.82117%; }
.g-1_2:last-child { margin-right: 0; }

.g-2_3 { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; }
.g-2_3:last-child { margin-right: 0; }

.g-3_4 { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
.g-3_4:last-child { margin-right: 0; }

.g-omega { margin-right: 0; }

.g-shift-1 { margin-left: 8.5298%; }
.g-shift-2 { margin-left: 17.05961%; }
.g-shift-3 { margin-left: 25.58941%; }
.g-shift-4 { margin-left: 34.11922%; }
.g-shift-5 { margin-left: 42.64902%; }
.g-shift-6 { margin-left: 51.17883%; }
.g-shift-7 { margin-left: 59.70863%; }
.g-shift-8 { margin-left: 68.23843%; }
.g-shift-9 { margin-left: 76.76824%; }
.g-shift-10 { margin-left: 85.29804%; }
.g-shift-11 { margin-left: 93.82785%; }

@media screen and (min-width: $medium-breakpoint) {
	.g-1_6__m { float: left; display: block; margin-right: 2.35765%; width: 14.70196%; }
	.g-1_6__m:last-child { margin-right: 0; }
	.g-1_4__m { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; }
	.g-1_4__m:last-child { margin-right: 0; }
	.g-1_3__m { float: left; display: block; margin-right: 2.35765%; width: 31.76157%; }
	.g-1_3__m:last-child { margin-right: 0; }
	.g-1_2__m { float: left; display: block; margin-right: 2.35765%; width: 48.82117%; }
	.g-1_2__m:last-child { margin-right: 0; }
	.g-2_3__m { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; }
	.g-2_3__m:last-child { margin-right: 0; }
	.g-3_4__m { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
	.g-3_4__m:last-child { margin-right: 0; }
	.g-omega__m { margin-right: 0; }
	.g-shift-1__m { margin-left: 8.5298%; }
	.g-shift-2__m { margin-left: 17.05961%; }
	.g-shift-3__m { margin-left: 25.58941%; }
	.g-shift-4__m { margin-left: 34.11922%; }
	.g-shift-5__m { margin-left: 42.64902%; }
	.g-shift-6__m { margin-left: 51.17883%; }
	.g-shift-7__m { margin-left: 59.70863%; }
	.g-shift-8__m { margin-left: 68.23843%; }
	.g-shift-9__m { margin-left: 76.76824%; }
	.g-shift-10__m { margin-left: 85.29804%; }
	.g-shift-11__m { margin-left: 93.82785%; }
}

@media screen and (min-width: $large-breakpoint) {
	.g-1_6__l { float: left; display: block; margin-right: 2.35765%; width: 14.70196%; }
	.g-1_6__l:last-child { margin-right: 0; }
	.g-1_4__l { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; }
	.g-1_4__l:last-child { margin-right: 0; }
	.g-1_3__l { float: left; display: block; margin-right: 2.35765%; width: 31.76157%; }
	.g-1_3__l:last-child { margin-right: 0; }
	.g-1_2__l { float: left; display: block; margin-right: 2.35765%; width: 48.82117%; }
	.g-1_2__l:last-child { margin-right: 0; }
	.g-2_3__l { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; }
	.g-2_3__l:last-child { margin-right: 0; }
	.g-3_4__l { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
	.g-3_4__l:last-child { margin-right: 0; }
	.g-omega__l { margin-right: 0; }
	.g-shift-1__l { margin-left: 8.5298%; }
	.g-shift-2__l { margin-left: 17.05961%; }
	.g-shift-3__l { margin-left: 25.58941%; }
	.g-shift-4__l { margin-left: 34.11922%; }
	.g-shift-5__l { margin-left: 42.64902%; }
	.g-shift-6__l { margin-left: 51.17883%; }
	.g-shift-7__l { margin-left: 59.70863%; }
	.g-shift-8__l { margin-left: 68.23843%; }
	.g-shift-9__l { margin-left: 76.76824%; }
	.g-shift-10__l { margin-left: 85.29804%; }
	.g-shift-11__l { margin-left: 93.82785%; }
}

// Bootstrap Grid customized with our specific sizing and breakpoints.
//
// Required variables can be found in ./src/scss/_variables.scss
// Required mixins for building grid classes can be found in ./src/scss/_vendor.scss

// Row
@if $enable-grid-classes {
	.row {
		@include make-row();
	}

	// Remove the negative margin from default .row, then the horizontal padding
	// from all immediate children columns (to prevent runaway style inheritance).
	.no-gutters {
		margin-right: 0;
		margin-left: 0;

		> .col,
		> [class*="col-"] {
			padding-right: 0;
			padding-left: 0;
		}
	}
}

// Columns
@if $enable-grid-classes {
	@include make-grid-columns();
}