grid.css

    /* Small screens (default) */
    html { font-size: 100%; }
     
    /* Medium screens (640px) */
    @media (min-width: 40rem) { 
      html { font-size: 112%; }
    }
     
    /* Large screens (1024px) */
    @media (min-width: 64rem) { 
      html { font-size: 120%; }
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    .container {
      margin: 0 auto;
      max-width: 48rem;
      width: 90%;
    }

    @media (min-width: 40rem) {
      .column {
        float: left;
        padding-left: 1rem;
        padding-right: 1rem;
      }
      
      .column.full { width: 100%; }
      .column.two-thirds { width: 66.7%; }
      .column.half { width: 50%; }
      .column.third { width: 33.3%; }
      .column.fourth { width: 25%; }
      .column.tenth { width: 10%; }
      .column.flow-opposite { float: right; }  
    }

    .clearfix:before,
    .clearfix:after {
      content: " ";
      display: table;
    }
     
    .clearfix:after {
      clear: both;
    }
     
    .clearfix {
      *zoom: 1;
    }