/* stylelint-disable selector-class-pattern */

.l-container {
  width: 100%;
  max-width: var(--v-layout-container-size-default);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--v-layout-container-padding);
  padding-right: var(--v-layout-container-padding);
}

.l-container--full {
  max-width: none;
}

.l-container--sm {
  max-width: var(--v-layout-container-size-sm);
}

.l-container--lg {
  max-width: var(--v-layout-container-size-lg);
}

.l-flex > div {
  display: flex;
  flex-wrap: wrap;
}

.l-flex--nowrap > div {
  flex-wrap: nowrap;
}

.l-flex > div > * {
  flex-basis: 100%;
}

@media (min-width: 700px) {
  .l-flex > div > .l-flex__item--20 {
    flex-basis: 20%;
  }

  .l-flex > div > .l-flex__item--25 {
    flex-basis: 25%;
  }

  .l-flex > div > .l-flex__item--30 {
    flex-basis: 30%;
  }

  .l-flex > div > .l-flex__item--33 {
    flex-basis: 33.33%;
  }

  .l-flex > div > .l-flex__item--40 {
    flex-basis: 40%;
  }

  .l-flex > div > .l-flex__item--50 {
    flex-basis: 50%;
  }

  .l-flex > div > .l-flex__item--60 {
    flex-basis: 60%;
  }

  .l-flex > div > .l-flex__item--66 {
    flex-basis: 66.66%;
  }

  .l-flex > div > .l-flex__item--70 {
    flex-basis: 70%;
  }

  .l-flex > div > .l-flex__item--75 {
    flex-basis: 75%;
  }

  .l-flex > div > .l-flex__item--80 {
    flex-basis: 80%;
  }
}
