// Container
.container {
  margin: 0 auto;
  width: 100%;
  max-width: $max-width - $gutter;
}

// Cells
.cells {
  display: flex;
  flex-grow: 1;
  flex-wrap: nowrap;
  padding-left: $gutter/2;
  padding-right: $gutter/2;

  @include media($tiny) {
    flex-wrap: wrap;
  }

}
.cells.are-gapped {
  margin: $gutter -$gutter/2;
  padding-left: 0;
  padding-right: 0;

  .cells {
    margin-left: 0;
    margin-right: 0;
  }

}
.cells.are-gridded {
  flex-wrap: wrap;

  .cell {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    margin-bottom: $gutter / 2;
    @include media($tiny) {
      padding-left: 0;
      padding-right: 0;
    }
  }

}
.cells.are-sparse {
  justify-content: space-between;
}
.cells.are-bottom {
  align-items: flex-end;
}
.cells.are-gapped .cell {
  padding-left: $gutter / 2;
  padding-right: $gutter / 2;
  &:first-child {
    padding-left: 0;
  }
  &:last-child {
    padding-right: 0;
  }
  @include media($tiny) {
    padding-left: 0;
    padding-right: 0;
  }
}
.cells.are-centered {
  justify-content: center;
}
.cells.are-end {
  justify-content: flex-end;
}
.cells.are-start {
  justify-content: flex-start;
}

// Cell
.cell {
  flex: auto;
  @include media($tiny) {
    width: 100%;
  }
}

.cell.is-fixed {
  flex: none;
}

// Some calculationz
$cells: (
  1: 'is-one',
  2: 'is-two',
  3: 'is-three',
  4: 'is-four',
  5: 'is-five',
  6: 'is-six',
  7: 'is-seven',
  8: 'is-eight',
  9: 'is-nine',
  10: 'is-ten',
  11: 'is-eleven',
  12: 'is-twelve'
);

%no-flex-grow {
  flex-grow: 0;
}

// Regular cells
@each $index, $class in $cells {
  .cell.#{$class} {
    @extend %no-flex-grow;
    width: #{$index * 100% / 12};
    @include media($tiny) {
      width: 100%;
    }
  }
}

// Fixed cells
@each $index, $class in $cells {
  .cell.is-fixed.#{$class} {
    width: #{$index * $max-width / 12};
    @include media($tiny) {
      width: 100%;
    }
  }
}

// Fixed gapped cells
@each $index, $class in $cells {
  .cells.are-gapped .cell.is-fixed.#{$class} {
    width: #{floor($index * $max-width / 12)};
    @include media($tiny) {
      width: 100%;
    }
  }
}