@use 'sass:math';

$global-gutter: 30px !default;

.row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-around;
  margin: 0 math.div(-$global-gutter, 2);
  flex: 1;

  > * {
    flex: 0 0 0px;
    flex-basis: calc(100% - #{$global-gutter});
    //margin: 0 ($global-gutter / 2);

    @for $i from 1 through 12 {
      &.m-#{$i} {
        flex-basis: calc(#{100% * math.div($i, 12)} - #{$global-gutter});
      }
    }
  }

  &.collapse {
    margin: 0;
    > * {
      flex: 1 0 0px;
      flex-basis: calc(100%);
      @for $i from 1 through 12 {
        &.m-#{$i} {
          flex-basis: #{100% * math.div($i, 12)};
        }
      }
    }
  }
}