.flex {
  display: flex;
}
.flex > * {
  position: relative;
}
.flex.space-between {
  justify-content: space-between;
}
.flex.space-around {
  justify-content: space-around;
}
.flex.flex-column {
  flex-direction: column;
}
.flex.wrap {
  flex-flow: row wrap;
}
.flex.flex-center {
  align-items: center;
}
.flex.flex-bottom {
  align-items: flex-end;
}
.flex.flex-text-center {
  justify-content: center;
}
.flex.flex-text-right {
  justify-content: flex-end;
}
.flex .flex-item-right {
  margin-left: auto !important;
}
.flex .flex-item-left {
  margin-right: auto !important;
}
.flex .flex-1 {
  flex: 1;
}
.flex .flex-2 {
  flex: 2;
}
.flex .flex-3 {
  flex: 3;
}
.flex .flex-4 {
  flex: 4;
}
.flex .flex-5 {
  flex: 5;
}
.flex .flex-6 {
  flex: 6;
}
.flex .flex-7 {
  flex: 7;
}
.flex .flex-8 {
  flex: 8;
}
.flex .flex-9 {
  flex: 9;
}
.flex .flex-10 {
  flex: 10;
}
.flex.fixed-columns-count {
  flex-wrap: wrap;
}
.flex.fixed-columns-count > * {
  width: calc( ( 100% - ( var(--bleed) * 2 * var(--columns-count) ) ) / var(--columns-count) );
  max-width: calc( ( 100% - ( var(--bleed) * 2 * var(--columns-count) ) ) / var(--columns-count) );
  min-width: calc( ( 100% - ( var(--bleed) * 2 * var(--columns-count) ) ) / var(--columns-count) );
}
.flex.fixed-columns-count.bleed {
  margin-left: calc( var(--bleed) * -1 );
  margin-right: calc( var(--bleed) * -1 );
}
.flex.fixed-columns-count.bleed > * {
  margin-bottom: calc(var(--bleed)*2);
}
.flex.fixed-columns-count.bleed > *:first-child {
  margin-left: var(--bleed);
}
.flex.fixed-columns-count.bleed > *:last-child {
  margin-right: var(--bleed);
}
.flex.bleed > * {
  margin-left: var(--bleed);
  margin-right: var(--bleed);
}
.flex.bleed > *:first-child {
  margin-left: 0;
}
.flex.bleed > *:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1560px) {
  .flex.break-laptop {
    flex-direction: column;
  }
  .flex.break-laptop.bleed {
    margin-left: 0px;
    margin-right: 0px;
  }
  .flex.break-laptop.bleed > * {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: var(--bleed);
    width: 100%;
  }
  .flex.break-laptop.bleed > :first-child {
    margin-left: 0px;
  }
  .flex.break-laptop.bleed > :last-child {
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 1380px) {
  .flex.break-tablet {
    flex-direction: column;
  }
  .flex.break-tablet.bleed {
    margin-left: 0px;
    margin-right: 0px;
  }
  .flex.break-tablet.bleed > * {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: var(--bleed);
    width: 100%;
  }
  .flex.break-tablet.bleed > :first-child {
    margin-left: 0px;
  }
  .flex.break-tablet.bleed > :last-child {
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 780px) {
  .flex.break-mobile {
    flex-direction: column;
  }
  .flex.break-mobile.bleed.fixed-columns-count {
    margin-left: 0px;
    margin-right: 0px;
  }
  .flex.break-mobile.bleed > * {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: var(--bleed);
    width: 100%;
  }
  .flex.break-mobile.bleed > :first-child {
    margin-left: 0px;
  }
  .flex.break-mobile.bleed > :last-child {
    margin-right: 0px;
    margin-bottom: 0px;
  }
}