@mixin column-classes($gutter-width, $max-columns, $class-name) {
  @for $cols from 1 through $max-columns {
    @for $span from 1 through $cols {
      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
        flex-basis: 100% / $cols * $span - ($gutter-width * 100%);
        max-width: 100% / $cols * $span - ($gutter-width * 100%);
        order: 6;
      }
    }
  }

  @for $cols from 1 through $max-columns {
    &.-#{unquote($class-name)}-order-#{$cols} {
      order: $cols;
    }
  }
}

$gutter-width: floor((1 / 1200) * 1000000) / 1000000 * 60;

.rs-columns {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: -#{$gutter-width * 100%};
  margin-top: -#{$gutter-width * 100%};

  &.-valign-center {
    align-items: center;
  }
  &.-valign-bottom {
    align-items: flex-end;
  }
  &.-valign-stretch {
    align-items: stretch;
  }

  &.-inline {
    display: inline-flex;
    margin-top: 0;
    margin-left: 0;
    .rs-column {
      margin: #{$gutter-width * 100%} #{$gutter-width/2 * 100%} 0;
    }
  }
}

.rs-column {
  flex: 0;
  max-width: 100%;
  min-width: 0;
  margin-top: $gutter-width * 100%;
  margin-left: $gutter-width * 100%;
  order: 6;

  /*> * + * {
    margin-top: 30px;
  }*/

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

  &.-valign-center {
    align-self: center;
  }
  &.-valign-bottom {
    align-self: flex-end;
  }
  &.-valign-stretch {
    align-self: stretch;
  }
}

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

  .rs-columns {
    margin-left: -#{$gutter-width * 100%};
    margin-top: -#{$gutter-width * 100%};
  }

  .rs-column {
    margin-top: $gutter-width * 100%;
    margin-left: $gutter-width * 100%;
    order: 6;

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

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

  .rs-columns {
    margin-left: -#{$gutter-width * 100%};
    margin-top: -#{$gutter-width * 100%};
  }

  .rs-column {
    margin-top: $gutter-width * 100%;
    margin-left: $gutter-width * 100%;
    order: 6;

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