/* in case of bugs see https://github.com/philipwalton/flexbugs */

.Grid {
  display: -ms-flexbox;
  display: flex;
}

.Grid--inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * @note be carefull with this
 * @see https://github.com/philipwalton/flexbugs/issues/86
 */

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

.Grid--nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.Grid--minsizeauto * {
  min-height: 0;
  min-width: 0;
}

/**
 *  dont allow browser to hide Grid-block
 *  @see http://codepen.io/safareli/full/OyWjzd/
 *
 * 1. Set `max-width:100%` to prevent
 *    overflow.
 * 2. Set `box-sizing:border-box` if
 *    needed to account for padding
 *    and border size.
 */

.Grid-block {
  -ms-flex: 0 0 1px;
      flex: 0 0 1px;
  min-width: 1px;
  min-height: 1px;
  box-sizing: border-box;
  /* [2] */
  max-width: 100%;
  /* [1] */
}

.Grid-block--fit {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
}

.Grid-block--nofit {
  -ms-flex-preferred-size: 1px;
  flex-basis: 1px;
}

.Grid--reverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.Grid--directionRow {
  -ms-flex-direction: row;
      flex-direction: row;
}

.Grid--directionRowReverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.Grid--directionCol {
  -ms-flex-direction: column;
      flex-direction: column;
}

.Grid--directionColReverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

/**
 * Alignment per grid @for cross axis(vertical)
 * @default stretch
 * @see https://cdn.css-tricks.com/wp-content/uploads/2014/05/align-items.svg
 */

.Grid--alignStart {
  -ms-flex-align: start;
  align-items: flex-start;
}

.Grid--alignEnd {
  -ms-flex-align: end;
  align-items: flex-end;
}

.Grid--alignCenter {
  -ms-flex-align: center;
  align-items: center;
}

.Grid--alignBaseline {
  -ms-flex-align: baseline;
  align-items: baseline;
}

.Grid--alignStretch {
  -ms-flex-align: stretch;
  align-items: stretch;
}

/**
 * space per grid @for main axis(horizontal)
 * @default flex-start
 * @see https://cdn.css-tricks.com/wp-content/uploads/2013/04/justify-content.svg
 */

.Grid--spaceStart {
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.Grid--spaceEnd {
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.Grid--spaceCenter {
  -ms-flex-pack: center;
  justify-content: center;
}

.Grid--spaceBetween {
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.Grid--spaceAround {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

/**
 * aligne grid rows
 * @default flex-start
 * @see https://cdn.css-tricks.com/wp-content/uploads/2013/04/align-content.svg
 */

.Grid--contentStart {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.Grid--contentEnd {
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.Grid--contentCenter {
  -ms-flex-line-pack: center;
  align-content: center;
}

.Grid--contentBetween {
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.Grid--contentAround {
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

/**
 * Alignment per block
 * same as .Grid--align* but for block
 * @see https://cdn.css-tricks.com/wp-content/uploads/2014/05/align-self.svg
 */

.Grid-block--alignStart {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.Grid-block--alignEnd {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

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

.Grid-block--alignBaseline {
  -ms-flex-item-align: baseline;
  align-self: baseline;
}

.Grid-block--alignStretch {
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

/**
 * Order of block
 * @see https://cdn.css-tricks.com/wp-content/uploads/2013/04/order-2.svg
 */

.Grid-block--orderStart1 {
  -ms-flex-order: -3;
  order: -3;
}

.Grid-block--orderStart2 {
  -ms-flex-order: -2;
  order: -2;
}

.Grid-block--orderStart3 {
  -ms-flex-order: -1;
  order: -1;
}

.Grid-block--orderDefault {
  -ms-flex-order: 0;
  order: 0;
}

.Grid-block--orderEnd1 {
  -ms-flex-order: 3;
  order: 3;
}

.Grid-block--orderEnd2 {
  -ms-flex-order: 2;
  order: 2;
}

.Grid-block--orderEnd3 {
  -ms-flex-order: 1;
  order: 1;
}

/**
 * Block weight in row
 * @ISSUE curently no way to combine u-size* and Grid-block-weight* classes
 * @TODO:
 *   reserch flex box and try to solv this issue might use
 *   flex-basis and max-width for sizing @see http://flexboxgrid.com/
 *
 * @see https://cdn.css-tricks.com/wp-content/uploads/2014/05/flex-grow.svg
 */

.Grid-block--weight1 {
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

.Grid-block--weight2 {
  -ms-flex-positive: 2;
  flex-grow: 2;
  -ms-flex-negative: 2;
  flex-shrink: 2;
}

.Grid-block--weight3 {
  -ms-flex-positive: 3;
  flex-grow: 3;
  -ms-flex-negative: 3;
  flex-shrink: 3;
}

.Grid-block--weight4 {
  -ms-flex-positive: 4;
  flex-grow: 4;
  -ms-flex-negative: 4;
  flex-shrink: 4;
}

.Grid-block--weight5 {
  -ms-flex-positive: 5;
  flex-grow: 5;
  -ms-flex-negative: 5;
  flex-shrink: 5;
}

.Grid-block--weight6 {
  -ms-flex-positive: 6;
  flex-grow: 6;
  -ms-flex-negative: 6;
  flex-shrink: 6;
}

.Grid-block--weight7 {
  -ms-flex-positive: 7;
  flex-grow: 7;
  -ms-flex-negative: 7;
  flex-shrink: 7;
}

.Grid-block--weight8 {
  -ms-flex-positive: 8;
  flex-grow: 8;
  -ms-flex-negative: 8;
  flex-shrink: 8;
}

/* With gutters */

.Grid--gutterNone {
  margin-left: 0;
  margin-top: 0;
}

.Grid--gutterNone > .Grid-block {
  padding-left: 0;
  padding-top: 0;
}

.Grid--gutterNarrow {
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

.Grid--gutterNarrow > .Grid-block {
  padding-left: 0.5rem;
  padding-top: 0.5rem;
}

.Grid--gutterNormal {
  margin-left: -1rem;
  margin-top: -1rem;
}

.Grid--gutterNormal > .Grid-block {
  padding-left: 1rem;
  padding-top: 1rem;
}

.Grid--gutterWide {
  margin-left: -2rem;
  margin-top: -2rem;
}

.Grid--gutterWide > .Grid-block {
  padding-left: 2rem;
  padding-top: 2rem;
}

@media (min-width: 30em) {
  .Grid--wrap\@xs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .Grid--nowrap\@xs {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .Grid-block--fit\@xs {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  .Grid-block--nofit\@xs {
    -ms-flex-preferred-size: 1px;
    flex-basis: 1px;
  }

  .Grid--reverse\@xs {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionRow\@xs {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .Grid--directionRowReverse\@xs {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionCol\@xs {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .Grid--directionColReverse\@xs {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .Grid--alignStart\@xs {
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .Grid--alignEnd\@xs {
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .Grid--alignCenter\@xs {
    -ms-flex-align: center;
    align-items: center;
  }

  .Grid--alignBaseline\@xs {
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .Grid--alignStretch\@xs {
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .Grid--spaceStart\@xs {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .Grid--spaceEnd\@xs {
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .Grid--spaceCenter\@xs {
    -ms-flex-pack: center;
    justify-content: center;
  }

  .Grid--spaceBetween\@xs {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .Grid--spaceAround\@xs {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .Grid--contentStart\@xs {
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }

  .Grid--contentEnd\@xs {
    -ms-flex-line-pack: end;
    align-content: flex-end;
  }

  .Grid--contentCenter\@xs {
    -ms-flex-line-pack: center;
    align-content: center;
  }

  .Grid--contentBetween\@xs {
    -ms-flex-line-pack: justify;
    align-content: space-between;
  }

  .Grid--contentAround\@xs {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
  }

  .Grid-block--alignStart\@xs {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .Grid-block--alignEnd\@xs {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .Grid-block--alignCenter\@xs {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .Grid-block--alignBaseline\@xs {
    -ms-flex-item-align: baseline;
    align-self: baseline;
  }

  .Grid-block--alignStretch\@xs {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  .Grid-block--orderStart1\@xs {
    -ms-flex-order: -3;
    order: -3;
  }

  .Grid-block--orderStart2\@xs {
    -ms-flex-order: -2;
    order: -2;
  }

  .Grid-block--orderStart3\@xs {
    -ms-flex-order: -1;
    order: -1;
  }

  .Grid-block--orderDefault\@xs {
    -ms-flex-order: 0;
    order: 0;
  }

  .Grid-block--orderEnd1\@xs {
    -ms-flex-order: 3;
    order: 3;
  }

  .Grid-block--orderEnd2\@xs {
    -ms-flex-order: 2;
    order: 2;
  }

  .Grid-block--orderEnd3\@xs {
    -ms-flex-order: 1;
    order: 1;
  }

  .Grid-block--weight1\@xs {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .Grid-block--weight2\@xs {
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
  }

  .Grid-block--weight3\@xs {
    -ms-flex-positive: 3;
    flex-grow: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
  }

  .Grid-block--weight4\@xs {
    -ms-flex-positive: 4;
    flex-grow: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
  }

  .Grid-block--weight5\@xs {
    -ms-flex-positive: 5;
    flex-grow: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
  }

  .Grid-block--weight6\@xs {
    -ms-flex-positive: 6;
    flex-grow: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
  }

  .Grid-block--weight7\@xs {
    -ms-flex-positive: 7;
    flex-grow: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
  }

  .Grid-block--weight8\@xs {
    -ms-flex-positive: 8;
    flex-grow: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
  }

  .Grid--gutterNone\@xs {
    margin-left: 0;
    margin-top: 0;
  }

  .Grid--gutterNone\@xs > .Grid-block {
    padding-left: 0;
    padding-top: 0;
  }

  .Grid--gutterNarrow\@xs {
    margin-left: -0.5rem;
    margin-top: -0.5rem;
  }

  .Grid--gutterNarrow\@xs > .Grid-block {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

  .Grid--gutterNormal\@xs {
    margin-left: -1rem;
    margin-top: -1rem;
  }

  .Grid--gutterNormal\@xs > .Grid-block {
    padding-left: 1rem;
    padding-top: 1rem;
  }

  .Grid--gutterWide\@xs {
    margin-left: -2rem;
    margin-top: -2rem;
  }

  .Grid--gutterWide\@xs > .Grid-block {
    padding-left: 2rem;
    padding-top: 2rem;
  }
}

@media (min-width: 45em) {
  .Grid--wrap\@s {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .Grid--nowrap\@s {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .Grid-block--fit\@s {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  .Grid-block--nofit\@s {
    -ms-flex-preferred-size: 1px;
    flex-basis: 1px;
  }

  .Grid--reverse\@s {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionRow\@s {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .Grid--directionRowReverse\@s {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionCol\@s {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .Grid--directionColReverse\@s {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .Grid--alignStart\@s {
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .Grid--alignEnd\@s {
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .Grid--alignCenter\@s {
    -ms-flex-align: center;
    align-items: center;
  }

  .Grid--alignBaseline\@s {
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .Grid--alignStretch\@s {
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .Grid--spaceStart\@s {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .Grid--spaceEnd\@s {
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .Grid--spaceCenter\@s {
    -ms-flex-pack: center;
    justify-content: center;
  }

  .Grid--spaceBetween\@s {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .Grid--spaceAround\@s {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .Grid--contentStart\@s {
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }

  .Grid--contentEnd\@s {
    -ms-flex-line-pack: end;
    align-content: flex-end;
  }

  .Grid--contentCenter\@s {
    -ms-flex-line-pack: center;
    align-content: center;
  }

  .Grid--contentBetween\@s {
    -ms-flex-line-pack: justify;
    align-content: space-between;
  }

  .Grid--contentAround\@s {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
  }

  .Grid-block--alignStart\@s {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .Grid-block--alignEnd\@s {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .Grid-block--alignCenter\@s {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .Grid-block--alignBaseline\@s {
    -ms-flex-item-align: baseline;
    align-self: baseline;
  }

  .Grid-block--alignStretch\@s {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  .Grid-block--orderStart1\@s {
    -ms-flex-order: -3;
    order: -3;
  }

  .Grid-block--orderStart2\@s {
    -ms-flex-order: -2;
    order: -2;
  }

  .Grid-block--orderStart3\@s {
    -ms-flex-order: -1;
    order: -1;
  }

  .Grid-block--orderDefault\@s {
    -ms-flex-order: 0;
    order: 0;
  }

  .Grid-block--orderEnd1\@s {
    -ms-flex-order: 3;
    order: 3;
  }

  .Grid-block--orderEnd2\@s {
    -ms-flex-order: 2;
    order: 2;
  }

  .Grid-block--orderEnd3\@s {
    -ms-flex-order: 1;
    order: 1;
  }

  .Grid-block--weight1\@s {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .Grid-block--weight2\@s {
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
  }

  .Grid-block--weight3\@s {
    -ms-flex-positive: 3;
    flex-grow: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
  }

  .Grid-block--weight4\@s {
    -ms-flex-positive: 4;
    flex-grow: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
  }

  .Grid-block--weight5\@s {
    -ms-flex-positive: 5;
    flex-grow: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
  }

  .Grid-block--weight6\@s {
    -ms-flex-positive: 6;
    flex-grow: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
  }

  .Grid-block--weight7\@s {
    -ms-flex-positive: 7;
    flex-grow: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
  }

  .Grid-block--weight8\@s {
    -ms-flex-positive: 8;
    flex-grow: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
  }

  .Grid--gutterNone\@s {
    margin-left: 0;
    margin-top: 0;
  }

  .Grid--gutterNone\@s > .Grid-block {
    padding-left: 0;
    padding-top: 0;
  }

  .Grid--gutterNarrow\@s {
    margin-left: -0.5rem;
    margin-top: -0.5rem;
  }

  .Grid--gutterNarrow\@s > .Grid-block {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

  .Grid--gutterNormal\@s {
    margin-left: -1rem;
    margin-top: -1rem;
  }

  .Grid--gutterNormal\@s > .Grid-block {
    padding-left: 1rem;
    padding-top: 1rem;
  }

  .Grid--gutterWide\@s {
    margin-left: -2rem;
    margin-top: -2rem;
  }

  .Grid--gutterWide\@s > .Grid-block {
    padding-left: 2rem;
    padding-top: 2rem;
  }
}

@media (min-width: 60em) {
  .Grid--wrap\@m {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .Grid--nowrap\@m {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .Grid-block--fit\@m {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  .Grid-block--nofit\@m {
    -ms-flex-preferred-size: 1px;
    flex-basis: 1px;
  }

  .Grid--reverse\@m {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionRow\@m {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .Grid--directionRowReverse\@m {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionCol\@m {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .Grid--directionColReverse\@m {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .Grid--alignStart\@m {
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .Grid--alignEnd\@m {
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .Grid--alignCenter\@m {
    -ms-flex-align: center;
    align-items: center;
  }

  .Grid--alignBaseline\@m {
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .Grid--alignStretch\@m {
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .Grid--spaceStart\@m {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .Grid--spaceEnd\@m {
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .Grid--spaceCenter\@m {
    -ms-flex-pack: center;
    justify-content: center;
  }

  .Grid--spaceBetween\@m {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .Grid--spaceAround\@m {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .Grid--contentStart\@m {
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }

  .Grid--contentEnd\@m {
    -ms-flex-line-pack: end;
    align-content: flex-end;
  }

  .Grid--contentCenter\@m {
    -ms-flex-line-pack: center;
    align-content: center;
  }

  .Grid--contentBetween\@m {
    -ms-flex-line-pack: justify;
    align-content: space-between;
  }

  .Grid--contentAround\@m {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
  }

  .Grid-block--alignStart\@m {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .Grid-block--alignEnd\@m {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .Grid-block--alignCenter\@m {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .Grid-block--alignBaseline\@m {
    -ms-flex-item-align: baseline;
    align-self: baseline;
  }

  .Grid-block--alignStretch\@m {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  .Grid-block--orderStart1\@m {
    -ms-flex-order: -3;
    order: -3;
  }

  .Grid-block--orderStart2\@m {
    -ms-flex-order: -2;
    order: -2;
  }

  .Grid-block--orderStart3\@m {
    -ms-flex-order: -1;
    order: -1;
  }

  .Grid-block--orderDefault\@m {
    -ms-flex-order: 0;
    order: 0;
  }

  .Grid-block--orderEnd1\@m {
    -ms-flex-order: 3;
    order: 3;
  }

  .Grid-block--orderEnd2\@m {
    -ms-flex-order: 2;
    order: 2;
  }

  .Grid-block--orderEnd3\@m {
    -ms-flex-order: 1;
    order: 1;
  }

  .Grid-block--weight1\@m {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .Grid-block--weight2\@m {
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
  }

  .Grid-block--weight3\@m {
    -ms-flex-positive: 3;
    flex-grow: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
  }

  .Grid-block--weight4\@m {
    -ms-flex-positive: 4;
    flex-grow: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
  }

  .Grid-block--weight5\@m {
    -ms-flex-positive: 5;
    flex-grow: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
  }

  .Grid-block--weight6\@m {
    -ms-flex-positive: 6;
    flex-grow: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
  }

  .Grid-block--weight7\@m {
    -ms-flex-positive: 7;
    flex-grow: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
  }

  .Grid-block--weight8\@m {
    -ms-flex-positive: 8;
    flex-grow: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
  }

  .Grid--gutterNone\@m {
    margin-left: 0;
    margin-top: 0;
  }

  .Grid--gutterNone\@m > .Grid-block {
    padding-left: 0;
    padding-top: 0;
  }

  .Grid--gutterNarrow\@m {
    margin-left: -0.5rem;
    margin-top: -0.5rem;
  }

  .Grid--gutterNarrow\@m > .Grid-block {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

  .Grid--gutterNormal\@m {
    margin-left: -1rem;
    margin-top: -1rem;
  }

  .Grid--gutterNormal\@m > .Grid-block {
    padding-left: 1rem;
    padding-top: 1rem;
  }

  .Grid--gutterWide\@m {
    margin-left: -2rem;
    margin-top: -2rem;
  }

  .Grid--gutterWide\@m > .Grid-block {
    padding-left: 2rem;
    padding-top: 2rem;
  }
}

@media (min-width: 80em) {
  .Grid--wrap\@l {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .Grid--nowrap\@l {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .Grid-block--fit\@l {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  .Grid-block--nofit\@l {
    -ms-flex-preferred-size: 1px;
    flex-basis: 1px;
  }

  .Grid--reverse\@l {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionRow\@l {
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .Grid--directionRowReverse\@l {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }

  .Grid--directionCol\@l {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .Grid--directionColReverse\@l {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }

  .Grid--alignStart\@l {
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .Grid--alignEnd\@l {
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .Grid--alignCenter\@l {
    -ms-flex-align: center;
    align-items: center;
  }

  .Grid--alignBaseline\@l {
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .Grid--alignStretch\@l {
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .Grid--spaceStart\@l {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .Grid--spaceEnd\@l {
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .Grid--spaceCenter\@l {
    -ms-flex-pack: center;
    justify-content: center;
  }

  .Grid--spaceBetween\@l {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .Grid--spaceAround\@l {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .Grid--contentStart\@l {
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }

  .Grid--contentEnd\@l {
    -ms-flex-line-pack: end;
    align-content: flex-end;
  }

  .Grid--contentCenter\@l {
    -ms-flex-line-pack: center;
    align-content: center;
  }

  .Grid--contentBetween\@l {
    -ms-flex-line-pack: justify;
    align-content: space-between;
  }

  .Grid--contentAround\@l {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
  }

  .Grid-block--alignStart\@l {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }

  .Grid-block--alignEnd\@l {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .Grid-block--alignCenter\@l {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .Grid-block--alignBaseline\@l {
    -ms-flex-item-align: baseline;
    align-self: baseline;
  }

  .Grid-block--alignStretch\@l {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  .Grid-block--orderStart1\@l {
    -ms-flex-order: -3;
    order: -3;
  }

  .Grid-block--orderStart2\@l {
    -ms-flex-order: -2;
    order: -2;
  }

  .Grid-block--orderStart3\@l {
    -ms-flex-order: -1;
    order: -1;
  }

  .Grid-block--orderDefault\@l {
    -ms-flex-order: 0;
    order: 0;
  }

  .Grid-block--orderEnd1\@l {
    -ms-flex-order: 3;
    order: 3;
  }

  .Grid-block--orderEnd2\@l {
    -ms-flex-order: 2;
    order: 2;
  }

  .Grid-block--orderEnd3\@l {
    -ms-flex-order: 1;
    order: 1;
  }

  .Grid-block--weight1\@l {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .Grid-block--weight2\@l {
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
  }

  .Grid-block--weight3\@l {
    -ms-flex-positive: 3;
    flex-grow: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
  }

  .Grid-block--weight4\@l {
    -ms-flex-positive: 4;
    flex-grow: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
  }

  .Grid-block--weight5\@l {
    -ms-flex-positive: 5;
    flex-grow: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
  }

  .Grid-block--weight6\@l {
    -ms-flex-positive: 6;
    flex-grow: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
  }

  .Grid-block--weight7\@l {
    -ms-flex-positive: 7;
    flex-grow: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
  }

  .Grid-block--weight8\@l {
    -ms-flex-positive: 8;
    flex-grow: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
  }

  .Grid--gutterNone\@l {
    margin-left: 0;
    margin-top: 0;
  }

  .Grid--gutterNone\@l > .Grid-block {
    padding-left: 0;
    padding-top: 0;
  }

  .Grid--gutterNarrow\@l {
    margin-left: -0.5rem;
    margin-top: -0.5rem;
  }

  .Grid--gutterNarrow\@l > .Grid-block {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

  .Grid--gutterNormal\@l {
    margin-left: -1rem;
    margin-top: -1rem;
  }

  .Grid--gutterNormal\@l > .Grid-block {
    padding-left: 1rem;
    padding-top: 1rem;
  }

  .Grid--gutterWide\@l {
    margin-left: -2rem;
    margin-top: -2rem;
  }

  .Grid--gutterWide\@l > .Grid-block {
    padding-left: 2rem;
    padding-top: 2rem;
  }
}