.grid {
	@include outer-container();
	max-width: $site-max-width;

	@include media($tablet-up) {
		// Defines width of element
		.width-one-whole {
			@include span-columns(12);
		}
		.width-one-half {
			@include span-columns(6);
		}
		.width-one-third {
			@include span-columns(4);
		}
		.width-two-thirds {
			@include span-columns(8);
		}
		.width-one-fourth {
			@include span-columns(3);
		}
		.width-three-fourths {
			@include span-columns(9);
		}
		.width-one-sixth {
			@include span-columns(2);
		}
		.width-five-sixths {
			@include span-columns(10);
		}
		.width-one-twelfth {
			@include span-columns(1);
		}
		.width-five-twelfths {
			@include span-columns(5);
		}
		.width-seven-twelfths {
			@include span-columns(7);
		}
		.width-eleven-twelfths {
			@include span-columns(11);
		}

		// Shift Classes (adds white space to the left of grid item)
		.shift-one-half {
			@include shift(6);
		}
		.shift-one-third {
			@include shift(4);
		}
		.shift-two-thirds {
			@include shift(8);
		}
		.shift-one-fourth {
			@include shift(3);
		}
		.shift-three-fourths {
			@include shift(9);
		}
		.shift-one-sixth {
			@include shift(2);
		}
		.shift-five-sixths {
			@include shift(10);
		}
		.shift-one-twelfth {
			@include shift(1);
		}
		.shift-five-twelfths {
			@include shift(5);
		}
		.shift-seven-twelfths {
			@include shift(7);
		}
		.shift-eleven-twelfths {
			@include shift(11);
		}

		// Specificies end of a row.
		// Required if grid-box contains multiple rows.
		// Required if browser does not support :last-child
		.end-row {
			@include omega();
		}

		// Fixes grid alignment when grid__items have varying heights.
		.end-row + .grid__item {
			clear: left;
		}
	}
}