/*

Flex Grid Container 

*/
.flexGridRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flexGridRow--column {
  flex-direction: column;
}

.flexGridRow--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* Horizontal alignment options */
.flexGridRow--pushLeft {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  /* Default */
}

.flexGridRow--pushRight {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.flexGridRow--spaceEvenly {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

/* Vertical alignment options */
.flexGridRow--alignTop {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flexGridRow--alignCenter {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flexGridRow--alignBottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flexGridRow--stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  /* Default */
}

/* Container alignment options */
.flexGridRow--groupTop {
  -ms-flex-line-pack: start;
      align-content: flex-start;
  /* Default */
}

.flexGridRow--groupBottom {
  -ms-flex-line-pack: end;
      align-content: flex-end;
}

.flexGridRow--groupCenter {
  -ms-flex-line-pack: center;
      align-content: center;
}

.flexGridRow--groupStretch {
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

/*

Flex Grid Cell 

*/
.cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* Cell sizes */
.cell--full {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.cell--threeQuarters {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
}

.cell--twoThirds {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.6666%;
          flex: 0 0 66.6666%;
}

.cell--half {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.cell--third {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3333%;
          flex: 0 0 33.3333%;
}

.cell--oneQuarter {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

/* Cell individual alignment options */
.cell--alignTop {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.cell--alignBottom {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.cell--alignCenter {
  -ms-flex-item-align: center;
      align-self: center;
}

@media screen and (max-width: 55em) {
  .cell--twoThirds, .cell--third {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }

  .cell.cell--mobile-full {
    flex: 0 0 100%;
  }
}

/* 

Grid with Gutters 

*/
.flexGridRow--gutters {
  margin: -1em 0 0 -1em;
}

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