// https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/grid.css
.Grid {
  @include flexbox;
  @include flex-wrap(wrap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid-cell {
  @include flex(1);
}

.Grid--flexCells > .Grid-cell {
  @include flexbox;
}

.Grid--top {
  @include align-items(flex-start);
}

.Grid--bottom {
  @include align-items(flex-end);
}

.Grid--center {
  @include align-items(center);
}

.Grid--justifyCenter {
  @include justify-content(center);
}

.Grid-cell--top {
  @include align-self(flex-start);
}

.Grid-cell--bottom {
  @include align-self(flex-end);
}

.Grid-cell--center {
  @include align-self(center);
}

.Grid-cell--autoSize {
  @include flex(none);
}

.Grid--fit > .Grid-cell {
  @include flex(1);
}

.Grid--full > .Grid-cell {
  @include flex(0 0 100%);
}

.Grid--1of2 > .Grid-cell {
  @include flex(0 0 50%);
}

.Grid--1of3 > .Grid-cell {
  @include flex(0 0 33.3333%);
}

.Grid--1of4 > .Grid-cell {
  @include flex(0 0 25%);
}

@include above($small-breakpoint) {
  .small-Grid--fit > .Grid-cell {
    @include flex(1);
  }
  .small-Grid--full > .Grid-cell {
    @include flex(0 0 100%);
  }
  .small-Grid--1of2 > .Grid-cell {
    @include flex(0 0 50%);
  }
  .small-Grid--1of3 > .Grid-cell {
    @include flex(0 0 33.3333%);
  }
  .small-Grid--1of4 > .Grid-cell {
    @include flex(0 0 25%);
  }
}

@include above($breakpoint) {
  .med-Grid--fit > .Grid-cell {
    @include flex(1);
  }
  .med-Grid--full > .Grid-cell {
    @include flex(0 0 100%);
  }
  .med-Grid--1of2 > .Grid-cell {
    @include flex(0 0 50%);
  }
  .med-Grid--1of3 > .Grid-cell {
    @include flex(0 0 33.3333%);
  }
  .med-Grid--1of4 > .Grid-cell {
    @include flex(0 0 25%);
  }
}

@include above($large-breakpoint) {
  .large-Grid--fit > .Grid-cell {
    @include flex(1);
  }
  .large-Grid--full > .Grid-cell {
    @include flex(0 0 100%);
  }
  .large-Grid--1of2 > .Grid-cell {
    @include flex(0 0 50%);
  }
  .large-Grid--1of3 > .Grid-cell {
    @include flex(0 0 33.3333%);
  }
  .large-Grid--1of4 > .Grid-cell {
    @include flex(0 0 25%);
  }
}

.Grid--gutters {
  margin: -1em 0 1em -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

.Grid--guttersLg {
  margin: -1.5em 0 1.5em -1.5em;
}
.Grid--guttersLg > .Grid-cell {
  padding: 1.5em 0 0 1.5em;
}

.Grid--guttersXl {
  margin: -2em 0 2em -2em;
}
.Grid--guttersXl > .Grid-cell {
  padding: 2em 0 0 2em;
}

@include above($small-breakpoint) {
  .small-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .small-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .small-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .small-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .small-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .small-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}

@include above($breakpoint) {
  .med-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .med-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .med-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .med-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .med-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .med-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}

@include above($large-breakpoint) {
  .large-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .large-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .large-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .large-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .large-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .large-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}
