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

/**
  * Grid row
  *
  * 1. The outer two columns are just margin
  * 2. Prevent inline-block cells wrapping
  * 3. Prevent vertical spacing between inline-blocks (rather line-height than font-size)
  */

.grid-row
  width: column(12) /* 1 */
  max-width: 1680px
  margin: 0 auto
  font-size: 0 /* 2 */
  line-height: 0 /* 3 */

  /**
   * The full row doesn't have the two outer margin rows
   * They stretch till both ends of the window
   */

  &.full-row
    width: 100%
    max-width: none

/**
 * Grid column
 *
 * 1. Reset white-space inherited from `.grid`
 * 2. Reset font-size inherited from `.grid`
 * 3. Reset line-height inherited from `.grid`
 */

.grid-col
  position: relative

  display: inline-block
  overflow: hidden
  white-space: normal /* 1 */
  font-size: 1rem /* 2 */
  line-height: 1.6 /* 2 */

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

  &.center
    display: block /* 1 */
    margin: 0 auto

  &.overflow
    overflow: visible


@for $i from 1 through $gridColumns

  /* Column dimensions
   ========================================================================== */

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

  .col-#{$i}, .col-lg-#{$i}
    width: column($i,12)


    .full-row &
      width: column($i)


  /* Column shifts
   ========================================================================== */

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



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

 /*
  * Create a separate loop because of order for css rendering
  * because else it would overrule a previous media query
  */

@for $i from 1 through $gridColumns

  // Media query for large desktop
  +respond-to-width-beyond($xlGridBreakpoint)
    .col-xl-#{$i}
      width: column($i,12)

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

  // Media query for normal desktop
  +respond-to-width($mdGridBreakpoint)
    .col-md-#{$i}
      width: column($i,12)

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

  // Media query for tablets
  +respond-to-width($smGridBreakpoint)
    .col-sm-#{$i}
      width: column($i,12)

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

  // Media query for mobile
  +respond-to-width($xsGridBreakpoint)
    .col-xs-#{$i}
      width: column($i,12)

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