/* Full sized container using full width of the viewport */

.container-fluid
  margin: 0 auto
  width: 100%
  max-width: 100%

/*
 *  A little smaller container, adding a little padding 5% each side
 *  will be used for mobile screens */

.container
  margin: 0 auto
  max-width: 1280px
  width: 90%

.row
  display: flex
  flex-direction: row
  padding: 0
  width: 100%
  flex-wrap: wrap

  .col
    flex-wrap: wrap
    flex-direction: column
    flex: 1 1 auto
    padding: 0 1rem

    &.col-no-padding
      padding: 0

    &.col-auto
      flex: 0 0 auto

    @for $i from 1 through $columns
      &.col-#{$i}
        flex: 0 0 100% / $columns * $i
        max-width: 100% / $columns * $i

      &.col-offset-#{$i}
        margin-left: 100% / $columns * $i


@media (max-width: 42.0rem)
  .row
    flex-direction: column
    .col-expand
      max-width: 100% !important