.grid {
  /*margin: 0;*/
  /*padding: 0;*/
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  *word-spacing: -0.43em;
  text-rendering: optimizespeed;
  overflow: hidden;
}
.opera-only :-o-prefocus,
.grid {
  word-spacing: -0.43em;
}

.unit {
  display: inline-block;
  *display: inline;
  visibility: visible;
  zoom: 1;
  letter-spacing: normal;
  text-rendering: auto;
  vertical-align: top;
  word-spacing: normal;
}

.flex-img {
  display: block;
  width: 100%;
}

img {
  display: block;
  width: 100%;
}

.stretch{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: stretch;
  width: 100%!important;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.unit-spacer {
  padding: .2em;
}

.unit-spacer-s {
  padding: .5em;
}

/**
 * `units(prefix, cols = 4, add-offsets = false)`
 *
 * Calling unit() with a column number will create a fractional grid system of all possible sizes up to the column amount.
 *   e.g. unit("m", 6) yields the following column sizes: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6
 * The grid will build with a minimum of thirds (three columns)
 */
.unit-s-hidden {
  display: none;
  visibility: hidden;
}
.unit-s-1 {
  display: block;
  visibility: visible;
  width: 100%;
}
.unit-s-1-2 {
  width: 50%;
}
.unit-s-1-3 {
  width: 33.33333333333333%;
}
.unit-s-2-3 {
  width: 66.66666666666666%;
}
.unit-s-1-4 {
  width: 25%;
}
.unit-s-3-4 {
  width: 75%;
}
.unit-s-1-5 {
  width: 20%;
}
.unit-s-2-5 {
  width: 40%;
}
.unit-s-3-5 {
  width: 60%;
}
.unit-s-4-5 {
  width: 80%;
}
.unit-s-1-6 {
  width: 16.666666666666664%;
}
.unit-s-5-6 {
  width: 83.33333333333334%;
}
.unit-s-1-7 {
  width: 14.285714285714285%;
}
.unit-s-2-7 {
  width: 28.57142857142857%;
}
.unit-s-3-7 {
  width: 42.857142857142854%;
}
.unit-s-4-7 {
  width: 57.14285714285714%;
}
.unit-s-5-7 {
  width: 71.42857142857143%;
}
.unit-s-6-7 {
  width: 85.71428571428571%;
}
.unit-s-1-8 {
  width: 12.5%;
}
.unit-s-3-8 {
  width: 37.5%;
}
.unit-s-5-8 {
  width: 62.5%;
}
.unit-s-7-8 {
  width: 87.5%;
}
.unit-s-1-2,.unit-s-1-3,.unit-s-2-3,.unit-s-1-4,.unit-s-3-4,.unit-s-1-5,.unit-s-2-5,.unit-s-3-5,.unit-s-4-5,.unit-s-1-6,.unit-s-5-6,.unit-s-1-7,.unit-s-2-7,.unit-s-3-7,.unit-s-4-7,.unit-s-5-7,.unit-s-6-7,.unit-s-1-8,.unit-s-3-8,.unit-s-5-8,.unit-s-7-8 {
  display: inline-block;
  *display: inline;
  visibility: visible;
}
@media only screen and (min-width: 38em) {
  .unit-spacer-s {
    padding: 1em;
  }

  .unit-m-hidden {
    display: none;
    visibility: hidden;
  }
  .unit-m-1 {
    display: block;
    visibility: visible;
    width: 100%;
  }
  .unit-m-1-2 {
    width: 50%;
  }
  .unit-m-1-3 {
    width: 33.33333333333333%;
  }
  .unit-m-2-3 {
    width: 66.66666666666666%;
  }
  .unit-m-1-4 {
    width: 25%;
  }
  .unit-m-3-4 {
    width: 75%;
  }
  .unit-m-1-5 {
    width: 20%;
  }
  .unit-m-2-5 {
    width: 40%;
  }
  .unit-m-3-5 {
    width: 60%;
  }
  .unit-m-4-5 {
    width: 80%;
  }
  .unit-m-1-6 {
    width: 16.666666666666664%;
  }
  .unit-m-5-6 {
    width: 83.33333333333334%;
  }
  .unit-m-1-7 {
    width: 14.285714285714285%;
  }
  .unit-m-2-7 {
    width: 28.57142857142857%;
  }
  .unit-m-3-7 {
    width: 42.857142857142854%;
  }
  .unit-m-4-7 {
    width: 57.14285714285714%;
  }
  .unit-m-5-7 {
    width: 71.42857142857143%;
  }
  .unit-m-6-7 {
    width: 85.71428571428571%;
  }
  .unit-m-1-8 {
    width: 12.5%;
  }
  .unit-m-3-8 {
    width: 37.5%;
  }
  .unit-m-5-8 {
    width: 62.5%;
  }
  .unit-m-7-8 {
    width: 87.5%;
  }
  .unit-m-1-2,.unit-m-1-3,.unit-m-2-3,.unit-m-1-4,.unit-m-3-4,.unit-m-1-5,.unit-m-2-5,.unit-m-3-5,.unit-m-4-5,.unit-m-1-6,.unit-m-5-6,.unit-m-1-7,.unit-m-2-7,.unit-m-3-7,.unit-m-4-7,.unit-m-5-7,.unit-m-6-7,.unit-m-1-8,.unit-m-3-8,.unit-m-5-8,.unit-m-7-8 {
    display: inline-block;
    *display: inline;
    visibility: visible;
  }
}
@media only screen and (min-width: 60em) {

  .unit-spacer-s {
    padding: 2em;
  }

  .unit-l-hidden {
    display: none;
    visibility: hidden;
  }
  .unit-l-1 {
    display: block;
    visibility: visible;
    width: 100%;
  }
  .unit-l-1-2 {
    width: 50%;
  }
  .unit-l-1-3 {
    width: 33.33333333333333%;
  }
  .unit-l-2-3 {
    width: 66.66666666666666%;
  }
  .unit-l-1-4 {
    width: 25%;
  }
  .unit-l-2-4 {
    width: 50%;
  }
  .unit-l-3-4 {
    width: 75%;
  }
  .unit-l-1-5 {
    width: 20%;
  }
  .unit-l-2-5 {
    width: 40%;
  }
  .unit-l-3-5 {
    width: 60%;
  }
  .unit-l-4-5 {
    width: 80%;
  }
  .unit-l-1-6 {
    width: 16.666666666666664%;
  }
  .unit-l-5-6 {
    width: 83.33333333333334%;
  }
  .unit-l-1-7 {
    width: 14.285714285714285%;
  }
  .unit-l-2-7 {
    width: 28.57142857142857%;
  }
  .unit-l-3-7 {
    width: 42.857142857142854%;
  }
  .unit-l-4-7 {
    width: 57.14285714285714%;
  }
  .unit-l-5-7 {
    width: 71.42857142857143%;
  }
  .unit-l-6-7 {
    width: 85.71428571428571%;
  }
  .unit-l-1-8 {
    width: 12.5%;
  }
  .unit-l-3-8 {
    width: 37.5%;
  }
  .unit-l-5-8 {
    width: 62.5%;
  }
  .unit-l-7-8 {
    width: 87.5%;
  }
  .unit-l-1-2,.unit-l-1-3,.unit-l-2-3,.unit-l-1-4,.unit-l-3-4,.unit-l-1-5,.unit-l-2-5,.unit-l-3-5,.unit-l-4-5,.unit-l-1-6,.unit-l-5-6,.unit-l-1-7,.unit-l-2-7,.unit-l-3-7,.unit-l-4-7,.unit-l-5-7,.unit-l-6-7,.unit-l-1-8,.unit-l-3-8,.unit-l-5-8,.unit-l-7-8 {
    display: inline-block;
    *display: inline;
    visibility: visible;
  }
}