@import (reference) "_variables";

/*	grid
----------------------------------------------------------------------*/


// .grid acts as a container for .col
// eg: <div class="grid"><div class="col twelve"></div></div>

grid {
	display: block;
	font-size: 0;
	width: auto;
	margin: -1rem;
	
	grid:not(:first-child) { margin: 1rem -1rem 0 }
}

// columns
	
@columns: 12;
	
.width(@x) {
	width: 100% / @columns * @x;
}

// eg: <div col="6"></div>

[col="1/12"]		{ .width(1) }

[col="2/12"],
[col="1/6"]			{ .width(2) }

[col="3/12"],
[col="1/4"]			{ .width(3) }

[col="4/12"],
[col="2/6"],
[col="1/3"]			{ .width(4) }

[col="5/12"]		{ .width(5) }

[col="6/12"],
[col="3/6"],
[col="2/4"],
[col="1/2"]			{ .width(6) }

[col="7/12"]		{ .width(7) }

[col="8/12"],
[col="4/6"],
[col="2/3"]			{ .width(8) }

[col="9/12"],
[col="3/4"]			{ .width(9) }

[col="10/12"],
[col="5/6"]			{ .width(10) }

[col="11/12"]		{ .width(11) }

[col="1/1"]			{ .width(12) }

[col] {
	display: inline-block;
	font-size: @fs-m;
	padding: 1rem;
	vertical-align: top;
		
	// columns go to 100% on @mobile width unless it has the .fx class
	// eg: <div class="fx" col="six"></div>
	
	@media (max-width: @mobile) {
		&:not([fx]) { width: 100% }
	}
}