/* --- FLEX --- */
:root {
  --flex-gap: var(--distance-1);
  /*--flex-gap-small: calc(var(--distance-1) / 3);
  --flex-gap-smaller: calc(var(--distance-1) / 2);
  --flex-gap-larger: calc(var(--distance-1) * 2);
  --flex-gap-large: calc(var(--distance-1) * 3);*/
}
@media only screen and (min-width: 1200px) {
  :root {
    --flex-gap: calc(var(--distance-1) * 2);
  }
}

.flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  /*&.small-gaps { gap: var(--flex-gap-small); }
  &.smaller-gaps { gap: var(--flex-gap-smaller); }
  &.larger-gaps { gap: var(--flex-gap-larger); }
  &.large-gaps { gap: var(--flex-gap-large); }*/
}
.flex > * {
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 100%;
}
.flex.has-col-1 > * {
  flex-basis: 100%;
}
.flex.has-col-2 > * {
  flex-basis: 50%;
}
.flex.has-col-3 > * {
  flex-basis: 33.333333%;
}
.flex.has-col-4 > * {
  flex-basis: 25%;
}
.flex.has-col-5 > * {
  flex-basis: 20%;
}
.flex.has-col-6 > * {
  flex-basis: 16.666666%;
}
.flex.has-col-7 > * {
  flex-basis: 14.285714%;
}
.flex.has-col-8 > * {
  flex-basis: 12.5%;
}
.flex.has-col-9 > * {
  flex-basis: 11.111111%;
}
.flex.has-col-10 > * {
  flex-basis: 10%;
}
.flex.has-col-11 > * {
  flex-basis: 9.090909%;
}
.flex.has-col-12 > * {
  flex-basis: 8.333333%;
}
.flex.align-vertical {
  align-items: center;
}
.flex.align-vertical > * {
  align-self: center;
}
.flex.align-horizontal {
  justify-content: center;
}
.flex.align-center {
  align-items: center;
  justify-content: center;
}
.flex.align-center > * {
  align-self: center;
}
.flex.gaps {
  gap: var(--flex-gap);
}
.flex.gaps.has-col-1 > * {
  flex-basis: 100%;
}
.flex.gaps.has-col-2 > * {
  flex-basis: calc(50% - var(--flex-gap) * 1 / 2);
}
.flex.gaps.has-col-3 > * {
  flex-basis: calc(33.333333% - var(--flex-gap) * 2 / 3);
}
.flex.gaps.has-col-4 > * {
  flex-basis: calc(25% - var(--flex-gap) * 3 / 4);
}
.flex.gaps.has-col-5 > * {
  flex-basis: calc(20% - var(--flex-gap) * 4 / 5);
}
.flex.gaps.has-col-6 > * {
  flex-basis: calc(16.666666% - var(--flex-gap) * 5 / 6);
}
.flex.gaps.has-col-7 > * {
  flex-basis: calc(14.285714% - var(--flex-gap) * 6 / 7);
}
.flex.gaps.has-col-8 > * {
  flex-basis: calc(12.5% - var(--flex-gap) * 7 / 8);
}
.flex.gaps.has-col-9 > * {
  flex-basis: calc(11.111111% - var(--flex-gap) * 8 / 9);
}
.flex.gaps.has-col-10 > * {
  flex-basis: calc(10% - var(--flex-gap) * 9 / 10);
}
.flex.gaps.has-col-11 > * {
  flex-basis: calc(9.090909% - var(--flex-gap) * 1 / 10);
}
.flex.gaps.has-col-12 > * {
  flex-basis: calc(8.333333% - var(--flex-gap) * 10 / 11);
}
.flex .col-1 {
  flex: 1 1 8.333%;
  flex-grow: 1;
}
.flex .col-2 {
  flex: 1 1 16.666%;
  flex-grow: 2;
}
.flex .col-3 {
  flex: 1 1 25%;
  flex-grow: 3;
}
.flex .col-4 {
  flex: 1 1 33.333%;
  flex-grow: 4;
}
.flex .col-5 {
  flex: 1 1 41.666%;
  flex-grow: 5;
}
.flex .col-6 {
  flex: 1 1 50%;
  flex-grow: 6;
}
.flex .col-7 {
  flex: 1 1 58.333%;
  flex-grow: 7;
}
.flex .col-8 {
  flex: 1 1 66.666%;
  flex-grow: 8;
}
.flex .col-9 {
  flex: 1 1 75%;
  flex-grow: 9;
}
.flex .col-10 {
  flex: 1 1 83.333%;
  flex-grow: 10;
}
.flex .col-11 {
  flex: 1 1 91.666%;
  flex-grow: 11;
}
.flex .col-12 {
  flex: 1 1 100%;
  flex-grow: 12;
}

/*
@media only screen and (min-width: 576px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1200px) {}
*//*# sourceMappingURL=flex.css.map */