/**
 * Based on https://github.com/pdcreis/simple-grid
 */

.container {
  max-width: $max-width;
  margin: 0 auto;
  padding: 0 $gutter;
  @extend .clearfix;
}

.row {
  @extend .clearfix;
  margin-left: -$gutter;
}

.col {
  float: left;
  padding-left: $gutter;
}

@mixin grid-loop($name){
  @for $i from 1 through $grid-columns {
    .col--#{$name}-#{$i} {
      width: percentage($i / $grid-columns);
    }
    .col--#{$name}-offset-#{$i} {
      margin-left: percentage($i / $grid-columns);
    }
  }
}

@each $breakpoint in $breakpoints-list {
  $name: nth($breakpoint, 1);
  $declaration: nth($breakpoint, 2);
  
  @if $name == ld {
    @include grid-loop($name);
  }
  
  @else {
    @media only screen and #{$declaration} {
      @include grid-loop($name);
    }
  } 
}