@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} {
        $width: (100% - (($cols - 1) * ($gutter-width * 100%))) / $cols * $span;
        flex-basis: $width;
        max-width: $width;
        order: 6;
      }
    }
  }

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

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

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

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

.rs-column {
  flex: 0;
  max-width: 100%;
  min-width: 0;
  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 {
    gap: #{$gutter-width * 100%};
  }

  .rs-column {
    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 * 30;

  .rs-columns {
    gap: #{$gutter-width * 100%};
  }

  .rs-column {
    order: 6;

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