// widths
.full
	width: 100%;
.half
	width: 50%;
.third
	width: 33.3333%;
.two-thirds
	width: 66.6666%;
.quarter
	width: 25%;
.three-quarters
	width: 75%;
.fifth
	width: 20%;
.two-fifths
	width: 40%;
.three-fifths
	width: 60%;
.four-fifths
	width: 80%;
.sixth
	width: 16.6667%;
.eighth
	width: 12.5%;
.tenth
	width: 10%;
.twelfth
	width: 8.3333%;

.grid
	padding: 0 1.5em 1.5em 0
	letter-spacing: -4px

.module
	display: inline-block
	letter-spacing: normal
	vertical-align: top
	width: 25%
	padding: 0 0 1.5em 1.5em
	-moz-box-sizing: border-box
	box-sizing: border-box

// at 960px when 4 columns really starts to break
@media (max-width: 60em)
	.module
		width: 50%
	.task-column
		max-height: 18em
		overflow-y: scroll

// at 600px when 2col starts breaking
@media (max-width: 37.5em)
	.grid
		padding-right: 0
	.module
		width: 100%
		padding-left: 0
		.task-column
			max-height: none
			overflow: visible