/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/

/* Layout Container */
.lc {
	max-width: $max-width;	
	margin: 0 auto;
	padding: $pad-half;
}

/*------------------------------------*\
    $TEMPLATES
\*------------------------------------*/

/* Two Column Layout */
.l-two-col {
	@extend .cf;

	.l-main {
		@media all and (min-width: $bp-large) {
			float: left;
			width: 70%;
			padding-right: $pad;
		}
	}
	
	.l-sidebar {
		@media all and (max-width: $bp-large) {
			clear: both;
		}

		@media all and (min-width: $bp-large) {
			float: left;
			width: 30%;
			padding: 0 0 0 $pad;
		}
	}
}


/*------------------------------------*\
    $GRIDS
\*------------------------------------*/

/* Grid Container */
.g {
	overflow: hidden;
	margin: 0 (-$pad-half);
}

/* Grid Item */
.gi {
	padding: $pad-half;
	
	img {
		display: block;
	}

	@media all and (min-width: $bp-med) {
		float: left;
	}
}

/* Grid 1up */
.g-1up {
	.gi {
		width: 100%;
	}
}

/* Grid 2up */
.g-2up {
	@media all and (min-width: $bp-med) {
		> .gi {
			float: left;
			width: 50%;
			
			&:nth-of-type(odd) {
				clear: left;
			}
		}
	}
}

/* Grid Half (Always displayed side by side) */
.g-half {
	> .gi {
		float: left;
		width: 50%;
		
		&:nth-of-type(odd) {
			clear: left;
		}
	}
}

/* Grid 3up */
.g-3up {
	@media all and (min-width: $bp-med) {
		> .gi {
			float: left;
			width: 50%;
			
			&:nth-of-type(2n+1) {
				clear: left;
			}
		}
	}
	
	@media all and (min-width: $bp-large) {
		> .gi {
			width: 33.3333333%;
			
			&:nth-of-type(2n+1) {
				clear: none;
			}
			
			&:nth-of-type(3n+1) {
				clear: left;
			}
		}
	}
}

/* Grid 4up */
.g-4up {
	@media all and (min-width: $bp-med) {
		>.gi {
			float: left;
			width: 50%;
			
			&:nth-of-type(2n+1) {
				clear: both;
			}
		}
	}
	
	@media all and (min-width: $bp-large) {
		>.gi {
			width: 25%;
			
			&:nth-of-type(2n+1) {
				clear: none;
			}
			
			&:nth-of-type(4n+1) {
				clear: left;
			}
		}
	}
}

/* Grid Quarter (Always displayed side by side) */
.g-quarter {
	> .gi {
		float: left;
		width: 24%;
		
		&:nth-of-type(4n+1) {
			clear: left;
		}
	}
}

.g-max4 {

	@media all and (min-width: $bp-small-2) {
		>.gi {
			float: left;
			width: 50%;
			
			&:nth-of-type(2n+1) {
				clear: both;
			}
		}
	}

	@media all and (min-width: $bp-small-3) {
		>.gi {
			width: 33.3333333%;
			
			&:nth-of-type(2n+1) {
				clear: none;
			}
			
			&:nth-of-type(3n+1) {
				clear: left;
			}
		}
	}
	
	@media all and (min-width: $bp-large) {
		>.gi {
			width: 25%;
			
			&:nth-of-type(3n+1) {
				clear: none;
			}
			
			&:nth-of-type(4n+1) {
				clear: left;
			}
		}
	}
}

/* Grid 5up */
.g-max5 {

	>.gi {
		float: left;
		width: 50%;
		
		&:nth-of-type(2n+1) {
			clear: both;
		}
	}

	@media all and (min-width: $bp-small-3) {
		>.gi {
			width: 33.3333333%;
			
			&:nth-of-type(2n+1) {
				clear: none;
			}
			
			&:nth-of-type(3n+1) {
				clear: left;
			}
		}
	}
	
	@media all and (min-width: $bp-med) {
		>.gi {
			width: 25%;
			
			&:nth-of-type(3n+1) {
				clear: none;
			}
			
			&:nth-of-type(4n+1) {
				clear: left;
			}
		}
	}

	@media all and (min-width: $bp-med-2) {
		>.gi {
			width: 20%;
			
			&:nth-of-type(4n+1) {
				clear: none;
			}
			
			&:nth-of-type(5n+1) {
				clear: left;
			}
		}
	}
}

/* Grid 2/3 */
.gi-2-3 {
	@media all and (min-width: $bp-med) {
		float: left;
		width: 66.666666%;
	}
}

.gi-1-3 {
	@media all and (min-width: $bp-med) {
		float: left;
		width: 33.333333%;
	}
}

/* Grid 4up block */
.g-opposites {
	.gi {
		float: left;
		
		&:last-child {
			float: right;
			text-align: right;
		}
	}
}