.flex--xs {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 15em) {
  .flex--xs {
    flex-direction: row;
  }
}
.flex--xs-20 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-20 {
    width: calc(20% - 1rem);
  }
}
.flex--xs-25 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-25 {
    width: calc(25% - 1rem);
  }
}
.flex--xs-30 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-30 {
    width: calc(30% - 1rem);
  }
}
.flex--xs-33 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--xs-50 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-50 {
    width: calc(50% - 1rem);
  }
}
.flex--xs-66 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-66 {
    width: calc(66% - 1rem);
  }
}
.flex--xs-70 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-70 {
    width: calc(70% - 1rem);
  }
}
.flex--xs-80 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-80 {
    width: calc(80% - 1rem);
  }
}
.flex--xs-100 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-100 {
    width: 100%;
  }
}
.flex--sm {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 33.75em) {
  .flex--sm {
    flex-direction: row;
  }
}
.flex--sm-20 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-20 {
    width: calc(20% - 1rem);
  }
}
.flex--sm-25 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-25 {
    width: calc(25% - 1rem);
  }
}
.flex--sm-30 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-30 {
    width: calc(30% - 1rem);
  }
}
.flex--sm-33 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--sm-50 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-50 {
    width: calc(50% - 1rem);
  }
}
.flex--sm-66 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-66 {
    width: calc(66% - 1rem);
  }
}
.flex--sm-70 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-70 {
    width: calc(70% - 1rem);
  }
}
.flex--sm-80 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-80 {
    width: calc(80% - 1rem);
  }
}
.flex--sm-100 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-100 {
    width: 100%;
  }
}
.flex--md {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 48em) {
  .flex--md {
    flex-direction: row;
  }
}
.flex--md-20 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-20 {
    width: calc(20% - 1rem);
  }
}
.flex--md-25 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-25 {
    width: calc(25% - 1rem);
  }
}
.flex--md-30 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-30 {
    width: calc(30% - 1rem);
  }
}
.flex--md-33 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--md-50 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-50 {
    width: calc(50% - 1rem);
  }
}
.flex--md-66 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-66 {
    width: calc(66% - 1rem);
  }
}
.flex--md-70 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-70 {
    width: calc(70% - 1rem);
  }
}
.flex--md-80 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-80 {
    width: calc(80% - 1rem);
  }
}
.flex--md-100 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-100 {
    width: 100%;
  }
}
.flex--lg {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 67.5em) {
  .flex--lg {
    flex-direction: row;
  }
}
.flex--lg-20 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-20 {
    width: calc(20% - 1rem);
  }
}
.flex--lg-25 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-25 {
    width: calc(25% - 1rem);
  }
}
.flex--lg-30 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-30 {
    width: calc(30% - 1rem);
  }
}
.flex--lg-33 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--lg-50 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-50 {
    width: calc(50% - 1rem);
  }
}
.flex--lg-66 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-66 {
    width: calc(66% - 1rem);
  }
}
.flex--lg-70 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-70 {
    width: calc(70% - 1rem);
  }
}
.flex--lg-80 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-80 {
    width: calc(80% - 1rem);
  }
}
.flex--lg-100 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-100 {
    width: 100%;
  }
}
.flex--xl {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 85.375em) {
  .flex--xl {
    flex-direction: row;
  }
}
.flex--xl-20 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-20 {
    width: calc(20% - 1rem);
  }
}
.flex--xl-25 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-25 {
    width: calc(25% - 1rem);
  }
}
.flex--xl-30 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-30 {
    width: calc(30% - 1rem);
  }
}
.flex--xl-33 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--xl-50 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-50 {
    width: calc(50% - 1rem);
  }
}
.flex--xl-66 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-66 {
    width: calc(66% - 1rem);
  }
}
.flex--xl-70 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-70 {
    width: calc(70% - 1rem);
  }
}
.flex--xl-80 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-80 {
    width: calc(80% - 1rem);
  }
}
.flex--xl-100 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-100 {
    width: 100%;
  }
}
.flex--xxl {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl {
    flex-direction: row;
  }
}
.flex--xxl-20 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-20 {
    width: calc(20% - 1rem);
  }
}
.flex--xxl-25 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-25 {
    width: calc(25% - 1rem);
  }
}
.flex--xxl-30 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-30 {
    width: calc(30% - 1rem);
  }
}
.flex--xxl-33 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-33 {
    width: calc(33.33% - 1rem);
  }
}
.flex--xxl-50 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-50 {
    width: calc(50% - 1rem);
  }
}
.flex--xxl-66 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-66 {
    width: calc(66% - 1rem);
  }
}
.flex--xxl-70 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-70 {
    width: calc(70% - 1rem);
  }
}
.flex--xxl-80 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-80 {
    width: calc(80% - 1rem);
  }
}
.flex--xxl-100 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-100 {
    width: 100%;
  }
}
.flex {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 48em) {
  .flex {
    flex-direction: row;
  }
}
.flex--top {
  align-items: flex-start;
}
.flex--middle {
  align-items: center;
}
.flex--bottom {
  align-items: flex-end;
}
.flex--baseline {
  align-items: baseline;
}
.flex--stretch {
  align-items: stretch;
}
.flex--left {
  justify-content: flex-start;
}
.flex--center {
  justify-content: center;
}
.flex--right {
  justify-content: flex-end;
}
.flex--space-between {
  justify-content: space-between;
}
.flex--space-around {
  justify-content: space-around;
}
.flex--space-evenly {
  justify-content: space-evenly;
}
.flex--wrap {
  flex-wrap: wrap;
}
.flex--column {
  flex-direction: column;
}
.flex--row {
  flex-direction: row;
}
.flex--top-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}
.flex--top-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
}
.flex--top-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}
.flex--top-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.flex--top-around {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 100%;
}
.flex--top-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  height: 100%;
}
.flex--middle-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.flex--middle-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.flex--middle-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.flex--middle-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.flex--middle-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.flex--middle-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}
.flex--bottom-center {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
.flex--bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}
.flex--bottom-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 100%;
}
.flex--bottom-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
}
.flex--bottom-around {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 100%;
}
.flex--bottom-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  height: 100%;
}
.flex--baseline-center {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 100%;
}
.flex--baseline-right {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  height: 100%;
}
.flex--baseline-left {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  height: 100%;
}
.flex--baseline-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 100%;
}
.flex--baseline-around {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  height: 100%;
}
.flex--baseline-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: baseline;
  height: 100%;
}
.flex--stretch-center {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}
.flex--stretch-right {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
}
.flex--stretch-left {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}
.flex--stretch-between {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}
.flex--stretch-around {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: 100%;
}
.flex--stretch-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  height: 100%;
}
.flex--content-center {
  display: flex;
  align-content: center;
  height: 100%;
}
.flex--content-right {
  display: flex;
  align-content: flex-end;
  height: 100%;
}
.flex--content-left {
  display: flex;
  align-content: flex-start;
  height: 100%;
}
.flex--content-between {
  display: flex;
  align-content: space-between;
  height: 100%;
}
.flex--content-around {
  display: flex;
  align-content: space-around;
  height: 100%;
}
.flex--content-evenly {
  display: flex;
  align-content: space-evenly;
  height: 100%;
}
.flex--self-auto {
  display: flex;
  align-self: auto;
  height: 100%;
}
.flex--self-center {
  display: flex;
  align-self: center;
  height: 100%;
}
.flex--self-right {
  display: flex;
  align-self: flex-end;
  height: 100%;
}
.flex--self-left {
  display: flex;
  align-self: flex-start;
  height: 100%;
}
.flex--self-baseline {
  display: flex;
  align-self: baseline;
  height: 100%;
}
.flex--self-stretch {
  display: flex;
  align-self: stretch;
  height: 100%;
}