Grid

[planework]

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }

.x1 { width: 4.66666666667%; }
.x2 { width: 13.3333333333%; }
.x3 { width: 22%; }
.x4 { width: 30.6666666667%; }
.x5 { width: 39.3333333333%; }
.x6 { width: 48%; }
.x7 { width: 56.6666666667%; }
.x8 { width: 65.3333333333%; }
.x9 { width: 74.0%; }
.x10 { width: 82.6666666667%; }
.x11 { width: 91.3333333333%; }
.x12 { width: 100%; margin-left: 0; }

.x1-3 { width: 30.6666666667%; }
.x2-3 { width: 65.3333333333%; }

.x1-2 { width: 48%; }

/* Offsets */
.offset-x1 { margin-left: 8.66666666667%; }
.offset-x2 { margin-left: 17.3333333333%; }
.offset-x3 { margin-left: 26%; }
.offset-x4 { margin-left: 34.6666666667%; }
.offset-x5 { margin-left: 43.3333333333%; }
.offset-x6 { margin-left: 52%; }
.offset-x7 { margin-left: 60.6666666667%; }
.offset-x8 { margin-left: 69.3333333333%; }
.offset-x9 { margin-left: 78.0%; }
.offset-x10 { margin-left: 86.6666666667%; }
.offset-x11 { margin-left: 95.3333333333%; }

.offset-x1-3 { margin-left: 34.6666666667%; }
.offset-x2-3 { margin-left: 69.3333333333%; }

.offset-x1-2 { margin-left: 52%; }
}