.row:before,
.row:after {
  content: "";
  display: table;
  font-size: 0;
}

.row, .row:after {
  clear: both
}

.col { float: left; min-height: 1px; width: 100%; }

@for $i from 1 through 12 {
  .col-#{$i} {
    @extend .col;
    width: ($i/12 * 100%);
  }
}

@each $screen-name, $screen-width in $screen-max-widths {
  @include more-than( $screen-name ) {
    @for $i from 1 through 12 {
      .col-#{$screen-name}-#{$i} {
        float: left; min-height: 1px;
        width: ($i/12 * 100%);
      }
    }
  }
}

.row-gutter-1 {
  margin-left: -$space-1 / 2;
  margin-right: -$space-1 / 2;
  & > .col {
    padding-left: $space-1 / 2;
    padding-right: $space-1 / 2;
  }
}

.row-gutter-2 {
  margin-left: -$space-1;
  margin-right: -$space-1;
  & > .col {
    padding-left: $space-1;
    padding-right: $space-1;
  }
}

.row-gutter-3 {
  margin-left: -$space-1 * 1.5;
  margin-right: -$space-1 * 1.5;
  & > .col {
    padding-left: $space-1 * 1.5;
    padding-right: $space-1 * 1.5;
  }
}

/*
.col-1 { width: (1/12 * 100%); }
.col-2 { width: (2/12 * 100%); }
.col-3 { width: (3/12 * 100%); }
.col-4 { width: (4/12 * 100%); }
.col-5 { width: (5/12 * 100%); }
.col-6 { width: (6/12 * 100%); }
.col-7 { width: (7/12 * 100%); }
.col-8 { width: (8/12 * 100%); }
.col-9 { width: (9/12 * 100%); }
.col-10 { width: (10/12 * 100%); }
.col-11 { width: (11/12 * 100%); }
.col-12 { width: 100%; }

@include more-than( sm ) {

  .sm-col { float: left; box-sizing: border-box; }
  .sm-col-right { float: right; box-sizing: border-box; }
  .sm-col-1 { width: (1/12 * 100%); }
  .sm-col-2 { width: (2/12 * 100%); }
  .sm-col-3 { width: (3/12 * 100%); }
  .sm-col-4 { width: (4/12 * 100%); }
  .sm-col-5 { width: (5/12 * 100%); }
  .sm-col-6 { width: (6/12 * 100%); }
  .sm-col-7 { width: (7/12 * 100%); }
  .sm-col-8 { width: (8/12 * 100%); }
  .sm-col-9 { width: (9/12 * 100%); }
  .sm-col-10 { width: (10/12 * 100%); }
  .sm-col-11 { width: (11/12 * 100%); }
  .sm-col-12 { width: 100%; }
}

@include more-than( md ) {

  .md-col { float: left; box-sizing: border-box; }
  .md-col-right { float: right; box-sizing: border-box; }
  .md-col-1 { width: (1/12 * 100%); }
  .md-col-2 { width: (2/12 * 100%); }
  .md-col-3 { width: (3/12 * 100%); }
  .md-col-4 { width: (4/12 * 100%); }
  .md-col-5 { width: (5/12 * 100%); }
  .md-col-6 { width: (6/12 * 100%); }
  .md-col-7 { width: (7/12 * 100%); }
  .md-col-8 { width: (8/12 * 100%); }
  .md-col-9 { width: (9/12 * 100%); }
  .md-col-10 { width: (10/12 * 100%); }
  .md-col-11 { width: (11/12 * 100%); }
  .md-col-12 { width: 100%; }
}

@include more-than( lg ) {

  .lg-col { float: left; box-sizing: border-box; }
  .lg-col-right { float: right; box-sizing: border-box; }
  .lg-col-1 { width: (1/12 * 100%); }
  .lg-col-2 { width: (2/12 * 100%); }
  .lg-col-3 { width: (3/12 * 100%); }
  .lg-col-4 { width: (4/12 * 100%); }
  .lg-col-5 { width: (5/12 * 100%); }
  .lg-col-6 { width: (6/12 * 100%); }
  .lg-col-7 { width: (7/12 * 100%); }
  .lg-col-8 { width: (8/12 * 100%); }
  .lg-col-9 { width: (9/12 * 100%); }
  .lg-col-10 { width: (10/12 * 100%); }
  .lg-col-11 { width: (11/12 * 100%); }
  .lg-col-12 { width: 100%; }
}
*/