/**
 * Logic stolen from responsivegridsystem.com, execution stolen from Bones
 * grid system. Allows me to define the layout for each breakpoint (Bones idea)
 * while eliminating awkward right-hand margins (rgs).
 *
 * @see http://www.responsivegridsystem.com/calculator/
 */

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0 1%;
}

/*= MOBILE
------------------------------------------------------------------------------*/
@media (max-width: 767px) {
	.col {
		margin: 0;
	}
	.m-all {
		width: 100%;
	}
	.inner.m-all {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
	}


	/*  GRID OF THREE  */
	.m-3of3 {
		width: 100%;
	}
	.m-2of3 {
		width: 64.7%;
	}
	.m-1of3 {
		width: 31.3%;
	}


	/*  GRID OF FOUR  */
	.m-4of4 {
		width: 100%;
	}
	.m-3of4 {
		width: 74.5%;
	}
	.m-2of4 {
		width: 48%;
	}
	.m-1of4 {
		width: 23%;
	}
}

/*= TABLET
------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1029px) {
	.t-all {
		width: 100%;
	}
	.inner.t-all {
		width: 98%;
	}


	/*  GRID OF THREE  */
	.t-3of3 {
		width: 100%;
	}
	.t-2of3 {
		width: 64.7%;
	}
	.t-1of3 {
		width: 31.3%;
	}


	/*  GRID OF FOUR  */
	.t-4of4 {
		width: 100%;
	}
	.t-3of4 {
		width: 74.5%;
	}
	.t-2of4 {
		width: 48%;
	}
	.t-1of4 {
		width: 23%;
	}

}

/*= DESKTOP
------------------------------------------------------------------------------*/
@media (min-width: 1030px) {
	.d-all {
		width: 100%
	}


	/*  GRID OF THREE  */
	.d-3of3 {
		width: 100%;
	}
	.d-2of3 {
		width: 64.7%;
	}
	.d-1of3 {
		width: 31.3%;
	}


	/*  GRID OF FOUR  */
	.d-4of4 {
		width: 100%;
	}
	.d-3of4 {
		width: 74.5%;
	}
	.d-2of4 {
		width: 48%;
	}
	.d-1of4 {
		width: 23%;
	}
}