.container {
  max-width: $max-width;
  margin: 0 auto;
  clear: both;
}

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

.col {
  float: left;
  padding-left: $gutter;
  margin-bottom: $gutter;
  .row {
    margin-top: $gutter;
  }
}

@each $breakpoint in $breakpoints-list {
  $name: nth($breakpoint, 1);
  $declaration: nth($breakpoint, 2);
  @media only screen and #{$declaration}{
    @if $name == sd {
      .col .col {
        margin-bottom: $gutter;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    @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);
      }
    }
  }
}