/*  This file is derived from the grid.css example at http://www.adamkaplan.me/grid/

    Styles in this file implement a mobile-first responsive grid layout. Some basic font
    settings are included to set relative sizes; don't add more styling via this sheet.

    Each top-level view should contain a <section> or similar semantic element, containing
    a <div class='container'> and one or more rows.
                                                                                           */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

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

.column { margin-bottom: 1.5rem; }

.column {
    float: left;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 100%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }

@media (min-width: 40rem) {
  .column.half { width: 50%; }
  html { font-size: 112%; }
}

@media (min-width: 68rem) {
  html { font-size: 120%; }
}