.group:after {
  content: "";
  display: table;
  clear: both;
}

.module {
  padding: 0 12px;
  float: left;
}

.module.item1 {
  float: none;
}

.item1,
.item1of2,
.item2of4,
.item3of6,
.item1of3,
.item2of6,
.item2of3,
.item1of4,
.item3of4,
.item1of5,
.item2of5,
.item3of5,
.item1of6 {
  width: 100%;
}

.item1of8 {
  width: 50%;
}

@media only screen and (min-width: 680px) {
  .item1of2,
  .item1of4,
  .item2of4,
  .item3of6 {
    width: 50%;
  }
  .item1of3,
  .item1of6,
  .item2of6 {
    width: 33.3333333333%;
  }
  .item2of3 {
    width: 66.6666666667%;
  }
  .item3of4 {
    width: 75%;
  }
  .item1of5 {
    width: 20%;
  }
  .item2of5 {
    width: 40%;
  }
  .item3of5 {
    width: 60%;
  }
  .item3of6 {
    width: 100%;
  }
  .item1of8 {
    width: 25%;
  }
}
/* 60em (960px) */
@media only screen and (min-width: 960px) {
  .item3of4 {
    width: 75%;
  }
  .item1of4 {
    width: 25%;
  }
  .item1of3,
  .item2of6 {
    width: 33.3333333333%;
  }
  .item2of3 {
    width: 66.6666666667%;
  }
  .item1of5 {
    width: 20%;
  }
  .item2of5 {
    width: 40%;
  }
  .item3of5 {
    width: 60%;
  }
  .item1of6 {
    width: 16.6666666667%;
  }
  .item3of6 {
    width: 50%;
  }
  .item1of8 {
    width: 12.5%;
  }
}

/*# sourceMappingURL=grid.css.map */