.flex {
  display: flex;
}

.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%;
}

.flex--100 {
  width: 100%;
}

.break--xs {
  flex-direction: column;
}
@media screen and (min-width: 15em) {
  .break--xs {
    flex-direction: row;
  }
}

.flex--xs-20 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--xs-25 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--xs-30 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--xs-33 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--xs-50 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--xs-66 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--xs-70 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--xs-75 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--xs-80 {
  width: 100%;
}
@media screen and (min-width: 15em) {
  .flex--xs-80 {
    width: calc(80% - var(--flex-between));
  }
}

.break--sm {
  flex-direction: column;
}
@media screen and (min-width: 33.75em) {
  .break--sm {
    flex-direction: row;
  }
}

.flex--sm-20 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--sm-25 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--sm-30 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--sm-33 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--sm-50 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--sm-66 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--sm-70 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--sm-75 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--sm-80 {
  width: 100%;
}
@media screen and (min-width: 33.75em) {
  .flex--sm-80 {
    width: calc(80% - var(--flex-between));
  }
}

.break--md {
  flex-direction: column;
}
@media screen and (min-width: 48em) {
  .break--md {
    flex-direction: row;
  }
}

.flex--md-20 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--md-25 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--md-30 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--md-33 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--md-50 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--md-66 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--md-70 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--md-75 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--md-80 {
  width: 100%;
}
@media screen and (min-width: 48em) {
  .flex--md-80 {
    width: calc(80% - var(--flex-between));
  }
}

.break--lg {
  flex-direction: column;
}
@media screen and (min-width: 67.5em) {
  .break--lg {
    flex-direction: row;
  }
}

.flex--lg-20 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--lg-25 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--lg-30 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--lg-33 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--lg-50 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--lg-66 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--lg-70 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--lg-75 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--lg-80 {
  width: 100%;
}
@media screen and (min-width: 67.5em) {
  .flex--lg-80 {
    width: calc(80% - var(--flex-between));
  }
}

.break--xl {
  flex-direction: column;
}
@media screen and (min-width: 85.375em) {
  .break--xl {
    flex-direction: row;
  }
}

.flex--xl-20 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--xl-25 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--xl-30 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--xl-33 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--xl-50 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--xl-66 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--xl-70 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--xl-75 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--xl-80 {
  width: 100%;
}
@media screen and (min-width: 85.375em) {
  .flex--xl-80 {
    width: calc(80% - var(--flex-between));
  }
}

.break--xxl {
  flex-direction: column;
}
@media screen and (min-width: 103.125em) {
  .break--xxl {
    flex-direction: row;
  }
}

.flex--xxl-20 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-20 {
    width: calc(20% - var(--flex-between));
  }
}

.flex--xxl-25 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-25 {
    width: calc(25% - var(--flex-between));
  }
}

.flex--xxl-30 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-30 {
    width: calc(30% - var(--flex-between));
  }
}

.flex--xxl-33 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-33 {
    width: calc(33% - var(--flex-between));
  }
}

.flex--xxl-50 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-50 {
    width: calc(50% - var(--flex-between));
  }
}

.flex--xxl-66 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-66 {
    width: calc(66% - var(--flex-between));
  }
}

.flex--xxl-70 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-70 {
    width: calc(70% - var(--flex-between));
  }
}

.flex--xxl-75 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-75 {
    width: calc(75% - var(--flex-between));
  }
}

.flex--xxl-80 {
  width: 100%;
}
@media screen and (min-width: 103.125em) {
  .flex--xxl-80 {
    width: calc(80% - var(--flex-between));
  }
}