/** GRID */
.grid {
  margin: 10px;
}
.grid:after {

  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}
[class*='colu-'] {
  float: left;
  padding: 10px;
}
.grid [class*='colu-']:last-of-type {
  padding-right: 10px;
}
@media only screen and (min-width:768px) {
  .colu-2-3 {
    width: 66.66%;
  }
  .colu-1-1 {
    width: 100%;
  }
  .colu-1-3 {
    width: 33.33%;
  }
  .colu-1-2 {
    width: 50%;
  }
  .colu-1-4 {
    width: 25%;
  }
  .colu-3-4 {
    width: 75%;
  }
  .colu-1-8 {
    width: 12.5%;
  }
}
.module {
  padding: 10px;
}

/* Opt-in outside padding */
.grid-pad {
  padding: 20px 0 20px 20px;
}
.grid-pad [class*='colu-']:last-of-type {
  padding-right: 20px;
}

/** END GRID */