@mixin column-classes($gutter-width, $max-columns, $class-name) {
  @for $cols from 1 through $max-columns {
    $colWidth: (1 - $gutter-width * ($cols - 1)) / $cols;

    @for $span from 1 through $cols {
      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
        width: ($colWidth * $span + $gutter-width * ($span - 1)) * 100%;
      }
    }
  }
}

.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  $gutter-width: 1 / 710 * 15;

  float: left;
  width: 100%;
  margin-top: $gutter-width * 100%;
  margin-right: $gutter-width * 100%;

  &.-large-first {
    clear: left;
  }

  &.-large-last {
    margin-right: -5px;
  }

  &.-large-first-row {
    margin-top: 0;
  }

  @include column-classes($gutter-width, 6, large);

  // Tablet portrait format (viewport width 900px and below)
  @media screen and (max-width: 900px) {
    $gutter-width: 1 / 13;

    margin-top: $gutter-width * 100%;
    margin-right: $gutter-width * 100%;

    &.-large-first {
      clear: none;
    }

    &.-large-last {
      margin-right: $gutter-width * 100%;
    }

    &.-large-first-row {
      margin-top: $gutter-width * 100%;
    }

    &.-medium-first {
      clear: left;
    }

    &.-medium-last {
      margin-right: -5px;
    }

    &.-medium-first-row {
      margin-top: 0;
    }

    @include column-classes($gutter-width, 6, medium);
  }

  // Mobile (viewport width 599px and below)
  @media screen and (max-width: 599px) {
    $gutter-width: 1 / 13;

    margin-right: $gutter-width * 100%;

    &.-medium-first {
      clear: none;
    }

    &.-medium-last {
      margin-right: $gutter-width * 100%;
    }

    &.-medium-first-row {
      margin-top: $gutter-width * 100%;
    }

    &.-small-first {
      clear: left;
    }

    &.-small-last {
      margin-right: -5px;
    }

    &.-small-first-row {
      margin-top: 0;
    }

    @include column-classes($gutter-width, 6, small);
  }
}