.container {
  max-width: $grid-container;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
  margin: auto;
}

.grid {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: $grid-gutter / -2;
  margin-left: $grid-gutter / -2;
}

.grid-item {
  padding-right: $grid-gutter / 2;
  padding-left: $grid-gutter / 2;
}

.grid-left {
  justify-content: flext-start;
}

.grid-center {
  justify-content: center;
}

.grid-right {
  justify-content: flex-end;
}

.grid-top {
  align-items: flex-start;
}

.grid-middle {
  align-items: center;
}

.grid-bottom {
  align-items: flex-end;
}

.grid-reverse {
  flex-direction: row-reverse;
}

.grid-stack {
  flex-direction: column;

  &.grid-reverse {
    flex-direction: column-reverse;
  }

  > .grid-item {
    flex-basis: auto;
  }
}

.grid-flat {
  margin-right: 0;
  margin-left: 0;

  > .grid-item {
    padding-right: 0;
    padding-left: 0;
  }
}

.grid-pair {
  > .grid-item {
    text-align: left;

    + .grid-item {
      text-align: right;
    }
  }
}

@mixin rwd-helpers-content($rwd-screen-name) {
  .#{$rwd-screen-name}-grid-reverse {
    flex-direction: row-reverse;
  }

  .#{$rwd-screen-name}-grid-stack {
    flex-direction: column;

    &.#{$rwd-screen-name}-grid-reverse {
      flex-direction: column-reverse;
    }

    > .grid-item {
      flex-basis: auto;
    }
  }
}

@include rwd-helpers;
