.container {
	max-width: 80em;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 30em) {

	.row {
		margin-left: -1.515151515152%;
		margin-right: -1.515151515152%;
	}

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-half,
	.grid-third,
	.grid-two-thirds,
	.grid-img {
		float: left;
		width:96.969696969697%;
		margin-left: 1.515151515152%;
		margin-right: 1.515151515152%;
	}

	.grid-third {
		width: 30.30303030303%;
	}

	.grid-half,
	.grid-img {
		width: 46.969696969697%;
	}

	.grid-two-thirds {
		width: 63.636363636364%;
	}

	/*  Reverses order of grid for content choreography */
	.grid-flip {
		float: right;
	}

}


/*  6-column grid  */
@media (min-width: 40em) {

	.grid-1 {
		width: 13.636363636364%;
	}

	.grid-2,
	.grid-third,
	.grid-img {
		width: 30.30303030303%;
	}

	.grid-3,
	.grid-half {
		width: 46.969696969697%;
	}

	.grid-4,
	.grid-two-thirds {
		width: 63.636363636364%;
	}

	.grid-5 {
		width: 80.30303030303%;
	}

	.grid-6 {
		width: 96.969696969697%;
	}


	/*  Offets let you shift grid elements to the right
	 *  but stay aligned to the grid. */
	.offset-1 {
		margin-left: 18.181818181818%;
	}

	.offset-2 {
		margin-left: 34.848484848485%;
	}

	.offset-3 {
		margin-left: 51.515151515152%;
	}

	.offset-4 {
		margin-left: 68.181818181818%;
	}

	.offset-5 {
		margin-left: 84.848484848485%;
	}

}


/*  Additional gridding for grid-img on bigger screens.
 *  Adjust as needed. */
@media (min-width: 60em) {
	.grid-img {
		width: 13.636363636364%;
	}
}

.row:before,
.row:after {
	display: table;
	content: "";
}

.row:after {
	clear: both;
}