html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.row {
  max-width: 800px;
  margin: 0 auto;
}

/* Clearfix */
.row:before,
.row:after {
  display: table;
  content: '';
}
.row:after {
  clear: both;
}
.col-3, .col-4, .col-6, .col-12 {
  float: left;
  padding: 0 1.04166666%;
}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
  width: 100%;
}

/* Non-mobile, grid */
@media only screen and (min-width: 640px) {
  /* 4 columns, each 3/12 columns wide */
  .col-3 {
    width: 25%;
  }
  /* 3 columns, each 4/12 columns wide */
  .col-4 {
    width: 33.33%;
  }
  /* 2 columns, each 6/12 columns wide */
  .col-6 {
    width: 50%;
  }
  .col-9 {
    width: 75%;
  }
  /* 1 column, 12/12 columns wide */
  .col-12 {
    width: 100%;
  }
  .offset-3 {
    margin-left: 25%;
  }
  .offset-6 {
    margin-left: 50%;
  }
}