/*  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%;
  @media #{$small-desktop} {
      font-size: 112%;
  }
  @media #{$desktop} {
      font-size: 120%;
  }
}

.container {
    margin: 0 auto;
    max-width: 1300px;
    width: 95%;
}

.column {
  /*margin-bottom: 1.5rem;*/
  @media #{$small-desktop} {
      float: left;
      margin: 0;
      padding-left: 1rem;
      padding-right: 1rem;

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