@mixin getFlex($value) {
  flex-grow: 0;
  flex-basis: calc(#{$value}/ 12 * 100%);
  max-width: calc(#{$value}/ 12 * 100%);
}

$justifyStyles: flex-start, flex-end, center, space-between, space-around,
  space-evenly;

$alignItemsStyles: flex-start, center, flex-end, stretch, baseline;

.iris-grid-container {
  width: calc(100%);
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  @for $i from 1 through 10 {
    &-spacing-#{$i} {
      $base: calc(#{$i}* 4px);
      width: calc(100% + 2 * #{$base});
      margin: 0 calc(-1 * #{$base});

      & > .iris-grid-item {
        padding: calc(#{$base});
      }
    }
  }
}
.iris-grid-item {
  @each $justifyStyle in $justifyStyles {
    &-justify-content-#{$justifyStyle} {
      justify-content: $justifyStyle;
    }
  }

  @each $alignItemsStyle in $alignItemsStyles {
    &-align-items-#{$alignItemsStyle} {
      align-items: $alignItemsStyle;
    }
  }

  @for $i from 1 through 12 {
    &-xs-#{$i} {
      flex-grow: 0;
      flex-basis: calc(#{$i}/ 12 * 100%);
      max-width: calc(#{$i}/ 12 * 100%);
    }
  }
  @each $bp, $bpv in $breakPointPairs {
    @media (min-width: $bpv) {
      @for $i from 1 through 12 {
        &-#{$bp}-#{$i} {
          flex-grow: 0;
          flex-basis: calc(#{$i}/ 12 * 100%);
          max-width: calc(#{$i}/ 12 * 100%);
        }
      }
    }
  }
}