/*****************************************************************************\
 *      LAYOUT FRAMEWORK
 *      RESPONSIVE 4
 *
 *      Usage Examples
 *      <div class="grid-sys [gap-1|gap-1-5|gap-2] [aligned|vertical|horizontal]">
 *          <div class="_12u _6u-tablet _4u-normal [vertical-me|horizontal-me] [important|...]">Content 1</div>
 *          <div class="_12u _6u-tablet _8u-normal [vertical-me|horizontal-me] [important|...]">Content 2</div>
 *      </div>
 *      Place mobile breakpoints first, followed by the breakpoints
 *      needed for larger screens
 *
 *      place important or important-{breakpoint} at the end of the
 *      classes to change the order of the content in the html flow
 *      @include breakpoint(wide) {
 *          ... scss here
 *      }
 *
 *      this uses the max-width feature
 *      @include breakpoint_max(wide) {
 *          ... scss here
 *      }
 *
 *      Runtime column override (no extra CSS needed):
 *      <div class="grid-sys" style="--grid-cols: 4">
\*****************************************************************************/
.unset-legacy {
  width: unset;
  float: unset;
  margin: unset;
}
.margin {
  margin: 1em;
}

.aligned {
  align-items: center;
  justify-items: center;
}
.aligned > * {
  text-align: center;
  height: auto !important;
  width: auto !important;
}

.vertical {
  align-items: center;
}
.vertical > * {
  height: auto !important;
}

.horizontal {
  justify-items: center;
}
.horizontal > * {
  width: auto !important;
  text-align: center;
}

@supports (display: grid) {
  .grid-sys {
    --grid-cols: 12;
    display: grid !important;
    gap: 0;
    grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
  }
  .grid-sys:after {
    display: none;
  }
  .vertical-me {
    align-self: center;
    height: auto !important;
  }
  .horizontal-me {
    justify-self: center;
    width: auto !important;
    text-align: center;
  }
  ._0u {
    display: none;
    width: 100%;
    min-height: 0;
    grid-column: span 0;
    order: 2;
  }
  ._1u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 1;
    order: 2;
  }
  ._2u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 2;
    order: 2;
  }
  ._3u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 3;
    order: 2;
  }
  ._4u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 4;
    order: 2;
  }
  ._5u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 5;
    order: 2;
  }
  ._6u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 6;
    order: 2;
  }
  ._7u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 7;
    order: 2;
  }
  ._8u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 8;
    order: 2;
  }
  ._9u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 9;
    order: 2;
  }
  ._10u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 10;
    order: 2;
  }
  ._11u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 11;
    order: 2;
  }
  ._12u {
    display: unset;
    width: 100%;
    min-height: 0;
    grid-column: span 12;
    order: 2;
  }
  @media only screen and (min-width: 320px) {
    ._0u-phone {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-phone {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 480px) {
    ._0u-mobile {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-mobile {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 768px) {
    ._0u-tablet {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-tablet {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 980px) {
    ._0u-narrow {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-narrow {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 1024px) {
    ._0u-normal {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-normal {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 1280px) {
    ._0u-wide {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-wide {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 1600px) {
    ._0u-hd {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-hd {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
  @media only screen and (min-width: 1920px) {
    ._0u-ultra {
      display: none;
      width: 100%;
      min-height: 0;
      grid-column: span 0;
      order: 2;
    }
    ._1u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 1;
      order: 2;
    }
    ._2u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 2;
      order: 2;
    }
    ._3u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 3;
      order: 2;
    }
    ._4u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 4;
      order: 2;
    }
    ._5u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 5;
      order: 2;
    }
    ._6u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 6;
      order: 2;
    }
    ._7u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 7;
      order: 2;
    }
    ._8u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 8;
      order: 2;
    }
    ._9u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 9;
      order: 2;
    }
    ._10u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 10;
      order: 2;
    }
    ._11u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 11;
      order: 2;
    }
    ._12u-ultra {
      display: unset;
      width: 100%;
      min-height: 0;
      grid-column: span 12;
      order: 2;
    }
  }
}
.padded,
.gap-1 {
  gap: 1em;
}

.gap-0-5 {
  gap: 0.5em;
}

.gap-1-5 {
  gap: 1.5em;
}

.gap-2 {
  gap: 2em;
}

.gap-2-5 {
  gap: 2.5em;
}

.gap-3 {
  gap: 3em;
}

.no-padded,
.gap-0 {
  gap: 0;
}

.important {
  order: 1;
}

@media only screen and (max-width: 320px) {
  .important-phone {
    order: 1;
  }
}
@media only screen and (max-width: 480px) {
  .important-mobile {
    order: 1;
  }
}
@media only screen and (max-width: 768px) {
  .important-tablet {
    order: 1;
  }
}
@media only screen and (max-width: 980px) {
  .important-narrow {
    order: 1;
  }
}
@media only screen and (max-width: 1024px) {
  .important-normal {
    order: 1;
  }
}
@media only screen and (max-width: 1280px) {
  .important-wide {
    order: 1;
  }
}
@media only screen and (max-width: 1600px) {
  .important-hd {
    order: 1;
  }
}
@media only screen and (max-width: 1920px) {
  .important-ultra {
    order: 1;
  }
}

/*# sourceMappingURL=xeno-grid.css.map */