/*
Simple wrapperless column gird system
--------------------------------------

Example:

```
<section class="column 4/12">
	...
</section>
<section class="column 8/12">
	<div class="6/12" ... >
		<img class="4/12" ... >
	</div>
</section>
```

IMPRV: should we change naming to something like `4-twelfths`, or `4-12ths`?
*/

.column {
	box-sizing: border-box;
	float: left;
	padding-right: 1em;
}

.column:last-of-type {
	padding-right: 0;
}


/* below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes */
.\31\/12 { /* `.1/12` */
	width: calc(100% / 12)
}

.\32\/12 { /* `.2/12` */
	width: calc(200% / 12)
}

.\33\/12 { /* `.3/12` */
	width: calc(300% / 12)
}

.\34\/12 { /* `.4/12` */
	 width: calc(400% / 12);}

.\35\/12 { /* `.5/12` */
	width: calc(500% / 12)
}

.\36\/12 { /* `.6/12` */
	width: calc(600% / 12)
}

.\37\/12 { /* `.7/12` */
	width: calc(700% / 12)
}

.\38\/12 { /* `.8/12` */
	width: calc(800% / 12)
}

.\39\/12 { /* `.9/12` */
	width: calc(900% / 12)
}

.\31\30\/12 { /* `.10/12` */
	width: calc(1000% / 12)
}

.\31\31\/12 { /* `.11/12` */
	width: calc(1100% / 12)
}

.\31\32\/12 { /* `.12/12` */
	width: 100%
}