/* ==========================================================================
   UTILITIES / WIDTHS
   ========================================================================== */

/**
 * A series of utility classes that give a fluid width to whichever element
 * they are applied to, media breakpoints are included.
 */

/* Mobile First
   =========================================== */
/**
 * Width size modifiers.
 */
.u-width-1 {
	flex-basis: calc(100% / 12 * 1);
	max-width: calc(100% / 12 * 1);
}

.u-width-2 {
	flex-basis: calc(100% / 12 * 2);
	max-width: calc(100% / 12 * 2);
}

.u-width-3 {
	flex-basis: calc(100% / 12 * 3);
	max-width: calc(100% / 12 * 3);
}

.u-width-4 {
	flex-basis: calc(100% / 12 * 4);
	max-width: calc(100% / 12 * 4);
}

.u-width-5 {
	flex-basis: calc(100% / 12 * 5);
	max-width: calc(100% / 12 * 5);
}

.u-width-6 {
	flex-basis: calc(100% / 12 * 6);
	max-width: calc(100% / 12 * 6);
}

.u-width-7 {
	flex-basis: calc(100% / 12 * 7);
	max-width: calc(100% / 12 * 7);
}

.u-width-8 {
	flex-basis: calc(100% / 12 * 8);
	max-width: calc(100% / 12 * 8);
}

.u-width-9 {
	flex-basis: calc(100% / 12 * 9);
	max-width: calc(100% / 12 * 9);
}

.u-width-10 {
	flex-basis: calc(100% / 12 * 10);
	max-width: calc(100% / 12 * 10);
}

.u-width-11 {
	flex-basis: calc(100% / 12 * 11);
	max-width: calc(100% / 12 * 11);
}

.u-width-12 {
	flex-basis: calc(100% / 12 * 12);
	max-width: calc(100% / 12 * 12);
}


/**
 * Offset size modifiers.
 */
.u-offset-1 {
	margin-left: calc(100% / 12 * 1);
}

.u-offset-2 {
	margin-left: calc(100% / 12 * 2);
}

.u-offset-3 {
	margin-left: calc(100% / 12 * 3);
}

.u-offset-4 {
	margin-left: calc(100% / 12 * 4);
}

.u-offset-5 {
	margin-left: calc(100% / 12 * 5);
}

.u-offset-6 {
	margin-left: calc(100% / 12 * 6);
}

.u-offset-7 {
	margin-left: calc(100% / 12 * 7);
}

.u-offset-8 {
	margin-left: calc(100% / 12 * 8);
}

.u-offset-9 {
	margin-left: calc(100% / 12 * 9);
}

.u-offset-10 {
	margin-left: calc(100% / 12 * 10);
}

.u-offset-11 {
	margin-left: calc(100% / 12 * 11);
}


/* Small Breakpoint [40em = 640px]
   =========================================== */
@media screen and (min-width: 40em) {
	.u-width-1--s {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--s {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--s {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--s {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--s {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--s {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--s {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--s {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--s {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--s {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--s {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--s {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--s {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--s {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--s {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--s {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--s {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--s {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--s {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--s {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--s {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--s {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--s {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Medium Breakpoint [48em = 768px]
   =========================================== */
@media screen and (min-width: 48em) {
	.u-width-1--m {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--m {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--m {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--m {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--m {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--m {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--m {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--m {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--m {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--m {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--m {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--m {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--m {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--m {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--m {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--m {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--m {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--m {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--m {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--m {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--m {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--m {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--m {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Large Breakpoint [60em = 960px]
   =========================================== */
@media screen and (min-width: 60em) {
	.u-width-1--l {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--l {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--l {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--l {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--l {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--l {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--l {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--l {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--l {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--l {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--l {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--l {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--l {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--l {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--l {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--l {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--l {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--l {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--l {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--l {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--l {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--l {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--l {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Wide-Screen Breakpoint [90em = 1440px]
   =========================================== */
@media screen and (min-width: 90em) {
	.u-width-1--w {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--w {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--w {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--w {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--w {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--w {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--w {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--w {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--w {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--w {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--w {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--w {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--w {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--w {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--w {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--w {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--w {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--w {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--w {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--w {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--w {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--w {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--w {
		margin-left: calc(100% / 12 * 11);
	}
}