/* ==========================================================================
   Grid
   ========================================================================== */

.contained-layout
  width: 100% /* 1 */
  max-width: $gridMaxWidth
  margin: 0 auto
  font-size: 0 /* 2 */

/* Columns
   ========================================================================== */

/*
 * Calculate width by dividing a full width into 12 columns
 * Create a class for each column
 */

@for $i from 1 through $gridColumns

  /**
   * Grid column
   *
   * 1. Reset white-space inherited from `.grid`
   */
  .col-#{$i}
    width: column($i)
    position: relative
    vertical-align: top

    display: inline-block
    margin: 0 auto
    white-space: normal /* 1 */

    /**
     * Center column
     *
     * 1. 'inline-block' doesn't center with margin '0 auto'
     */

    &.centered
      display: block /* 1 */
      margin-left: auto
      margin-right: auto

  // Handle direct children (columns in columns)
  @for $c from 1 through $gridColumns

    .col-#{$i} > .col-#{$c}
      width: column($c,$i)

/* Column offset
   ========================================================================== */

@for $i from 1 through $gridColumns

  .offset-#{$i}
    margin-left: column($i)

/* Media queries
 ========================================================================== */

/*
 * Define widths for different screen sizes
  */

// Cover all columns
@for $i from 0 through $gridColumns

  // Loop through $breakpoints for the other breakpoints
  $breakpoints :  ('md' $bp_md) ('sm' $bp_sm) ('mob' $bp_mobile) ('xs' $bp_xs)

  @each $list in $breakpoints

    $name : nth($list,1)
    $breakpoint : nth($list,2)

    +respond-to-width($breakpoint)
      .col-#{$name}-#{$i}
        width: column($i,6)

      .offset-#{$name}-#{$i}
        margin-left: column($i,6)