.container {
	margin: 0 auto;
	width: 92.5%;
	max-width: 144rem;
}

.container .container {
	width: auto;
}

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

.container::after,
.row::after,
.layout::after,
.module::after {
	clear: both;
}

.module {
	margin-top: 2.4rem;
	width: 100%;
}

.module:first-child {
	margin-top: 0;
}

.layout--equal .module:nth-last-child(1):first-child {
	margin-top: 2.4rem;
}

@media (min-width: 20em) {

	.container {
		width: 91.1%;
	}
	
}

@media (min-width: 33.75em) {

	.container {
		width: 87.5%;
	}
	
	.row,
	.layout {
  	margin-right: -1.2rem;
  	margin-left: -1.2rem;
	}
	
	.module {
		float: left;
		padding-right: 1.2rem;
		padding-left: 1.2rem;
	}
	
}

@media (min-width: 48em) {

	.container {
		width: 90%;
	}
	
	.row,
	.layout {
  		margin-left: -1.6rem;
  		margin-right: -1.6rem;
	}
	
	.module {
		padding-right: 1.6rem;
		padding-left: 1.6rem;
	}
	
}

/* Primary + Secondary */

@media (min-width: 48em) {

	.layout--basic .module,
	.layout--basic--alt .module,
	.layout--basic--offset .module,
	.layout--basic--offset--alt .module  {
		float: left;
		margin-top: 0;
		width: 50%;
	}
	
	.layout--basic .module--primary,
	.layout--basic--offset .module--primary {
		float: right;
	}
	
	.layout--basic--alt .module--secondary,
	.layout--basic--offset--alt .module--secondary {
		float: right;
	}

}

@media (min-width: 60em) {

	.layout--basic .module--primary,
	.layout--basic--alt .module--primary {
		width: 62.5%;
	}
	
	.layout--basic .module--secondary,
	.layout--basic--alt .module--secondary {
		width: 33.333333%;
	}

	.layout--basic--offset .module--primary,
	.layout--basic--offset--alt .module--primary {
		width: 58.3333333333%;
	}
	
	.layout--basic--offset .module--secondary,
	.layout--basic--offset--alt .module--secondary {
		width: 37.5%;
	}
	
}


/*
	Equal, variable layouts
	This strategy measures an exact number of elements: 2, 3, 4.
*/

@media (min-width: 33.75em) {
	
	/* Variable - 2 modules */
	.layout--equal .module:nth-last-child(2):first-child,
	.layout--equal .module:nth-last-child(2):first-child ~ .module {
		margin-top: 0;
	  width: 50%;
	}
	
}

@media (min-width: 60em) {
	
	/* Variable - 3 modules */
	.layout--equal .module:nth-last-child(3):first-child,
	.layout--equal .module:nth-last-child(3):first-child ~ .module {
		margin-top: 0;
	  width: 33.333333%;
	}
	
	/* Variable - 4 modules */
	
	.layout--equal .module:nth-last-child(4):first-child,
	.layout--equal .module:nth-last-child(4):first-child ~ .module {
		margin-top: 0;
	  width: 25%;
	}

}

@media (min-width: 33.75em) and (max-width: 60em) {
	
	/* Variable - 3 modules */	
	.layout--equal .module:nth-last-child(3):first-child ~ .module {
	  margin-top: 3.2rem;
	}

	/* Variable - 4 modules */
	.layout--equal .module:nth-last-child(4):first-child,
	.layout--equal .module:nth-last-child(4):first-child ~ .module {
		margin-top: 3.2rem;
		width: 50%;
	}
	
	.layout--equal .module:nth-last-child(4):first-child ~ .module:nth-child(3) {
		clear: left;
	}
	
	/* Reset top margins for first row of 3 and 4 modules */
	.layout--equal .module:nth-last-child(3):first-child,
	.layout--equal .module:nth-last-child(4):first-child,
	.layout--equal .module:nth-last-child(4):first-child ~ .module:nth-child(2) {
		margin-top: 0;
	}

}

/*
	Equal, forced widths
	This strategy forces widths on modules, regardless of number of modules.
*/

@media (min-width: 33.75em) {
	
	.layout--halves .module,
	.layout--thirds .module {
		margin-top: 3.2rem;
	  width: 50%;
	}
	
	.layout--halves .module:nth-child(-n+2),
	.layout--thirds .module:nth-child(-n+2) {
		margin-top: 0;
	}
	
	.layout--halves .module:nth-child(odd),
	.layout--thirds .module:nth-child(odd) {
		clear: left;
	}
	
}

@media (min-width: 60em) {

	/* A lone module */
	.layout--equal .module:nth-last-child(1):first-child {
		width: 50%;
	}

	.layout--thirds .module {
		width: 33.333333%;
	}

	.layout--quarters .module {
		width: 25%;
	}
	
	.layout--thirds .module:nth-child(-n+3),
	.layout--quarters .module:nth-child(-n+4) {
		margin-top: 0;
	}
	
	.layout--thirds .module:nth-child(odd) {
		clear: none;
	}

	.layout--thirds .module:nth-child(3n+1),
	.layout--quarters .module:nth-child(4n+1) {
		clear: left;
	}

}

@media (min-width: 33.75em) and (max-width: 60em) {

	.layout--thirds .module {
		margin-top: 3.2rem;
	}

	.layout--quarters .module {
		margin-top: 3.2rem;
		width: 50%;
	}
	
	.layout--thirds .module:nth-child(-n+2)
	.layout--quarters .module:nth-child(-n+2) {
		margin-top: 0;
	}

	.layout--quarters .module:nth-child(odd) {
		clear: left;
	}

}