// Variables for grid
$gutter: .5rem

// Components for grid
.row
  box-sizing: border-box
  display: flex
  flex: 0 1 auto
  flex-direction: row
  flex-wrap: wrap
  margin-left: -$gutter

.col
  box-sizing: border-box
  flex: 1 1 100%
  margin-bottom: $gutter
  margin-left: $gutter
  max-width: 100%

.box
  display: block

// Media Query Break Points
// Large Phones
@media only screen and (min-width: $sm)
// Tablets
@media only screen and (min-width: $md)
  .col
    flex: 1 0 0

// Notebooks and Desktops
@media only screen and (min-width: $lg)