:root {
  /* utopia scale: 360_18_1.125 -> 1240_18_1.2 */
  /* spacing */
  --space-xxs: clamp(0.5625rem, 0.5625rem + 0vw, 0.5625rem);
  --space-xs: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
  --space-s: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --space-m: clamp(1.6875rem, 1.6875rem + 0vw, 1.6875rem);
  --space-l: clamp(2.25rem, 2.25rem + 0vw, 2.25rem);
  --space-xl: clamp(3.375rem, 3.375rem + 0vw, 3.375rem);
  --space-xxl: clamp(4.5rem, 4.5rem + 0vw, 4.5rem);
  /* fonts */
  --font-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --font-1: clamp(1.2656rem, 1.2311rem + 0.1534vw, 1.35rem);
  --font-2: clamp(1.4238rem, 1.3436rem + 0.3567vw, 1.62rem);
  --font-3: clamp(1.6018rem, 1.4618rem + 0.6222vw, 1.944rem);
  --font-4: clamp(1.802rem, 1.5849rem + 0.965vw, 2.3328rem);
  --font-5: clamp(2.0273rem, 1.7114rem + 1.4038vw, 2.7994rem);
  --font-6: clamp(2.2807rem, 1.8395rem + 1.961vw, 3.3592rem);
  /* colors */
  --white: white;
  --light: hsl(0 0 90%);
  --dark: hsl(0 0 10%);
  --black: black;
  --primary: hsl(250, 46%, 50%);
  --sec: hsl(36, 49%, 72%);
  --primary-alt: hsl(250, 46%, 60%);
  --secondary-alt: hsl(36, 67%, 76%);
  /* animation */
  --speed: 0.2s;
  --delay: 0.1s;
  --timing: linear;
  --distance: 2rem;
  /* wrappers */
  --wrap-l: 1200px;
  --wrap-m: 1000px;
  --wrap-s: 800px;
}

/* --- VARIABLE MAPS  */
/* --- UTILITY CLASSES --- */
/* margin */
.m-xxs {
  margin: var(--space-xxs);
}

.mt-xxs {
  margin-top: var(--space-xxs);
}

.mb-xxs {
  margin-bottom: var(--space-xxs);
}

.mr-xxs {
  margin-right: var(--space-xxs);
}

.ml-xxs {
  margin-left: var(--space-xxs);
}

.mx-xxs {
  margin-left: var(--space-xxs);
  margin-right: var(--space-xxs);
}

.my-xxs {
  margin-top: var(--space-xxs);
  margin-bottom: var(--space-xxs);
}

/* padding */
.p-xxs {
  padding: var(--space-xxs);
}

.pt-xxs {
  padding-top: var(--space-xxs);
}

.pb-xxs {
  padding-bottom: var(--space-xxs);
}

.pr-xxs {
  padding-right: var(--space-xxs);
}

.pl-xxs {
  padding-left: var(--space-xxs);
}

.px-xxs {
  padding-left: var(--space-xxs);
  padding-right: var(--space-xxs);
}

.py-xxs {
  padding-top: var(--space-xxs);
  padding-bottom: var(--space-xxs);
}

/* gap */
.gap-xxs {
  gap: calc(var(--space-xxs) * 2);
}

/* owl/stack  */
.stacky-xxs > * + * {
  margin-top: var(--space-xxs);
}

.stackx-xxs > * + * {
  margin-left: var(--space-xxs);
}

/* margin */
.m-xs {
  margin: var(--space-xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

/* padding */
.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

/* gap */
.gap-xs {
  gap: calc(var(--space-xs) * 2);
}

/* owl/stack  */
.stacky-xs > * + * {
  margin-top: var(--space-xs);
}

.stackx-xs > * + * {
  margin-left: var(--space-xs);
}

/* margin */
.m-s {
  margin: var(--space-s);
}

.mt-s {
  margin-top: var(--space-s);
}

.mb-s {
  margin-bottom: var(--space-s);
}

.mr-s {
  margin-right: var(--space-s);
}

.ml-s {
  margin-left: var(--space-s);
}

.mx-s {
  margin-left: var(--space-s);
  margin-right: var(--space-s);
}

.my-s {
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
}

/* padding */
.p-s {
  padding: var(--space-s);
}

.pt-s {
  padding-top: var(--space-s);
}

.pb-s {
  padding-bottom: var(--space-s);
}

.pr-s {
  padding-right: var(--space-s);
}

.pl-s {
  padding-left: var(--space-s);
}

.px-s {
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}

.py-s {
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}

/* gap */
.gap-s {
  gap: calc(var(--space-s) * 2);
}

/* owl/stack  */
.stacky-s > * + * {
  margin-top: var(--space-s);
}

.stackx-s > * + * {
  margin-left: var(--space-s);
}

/* margin */
.m-m {
  margin: var(--space-m);
}

.mt-m {
  margin-top: var(--space-m);
}

.mb-m {
  margin-bottom: var(--space-m);
}

.mr-m {
  margin-right: var(--space-m);
}

.ml-m {
  margin-left: var(--space-m);
}

.mx-m {
  margin-left: var(--space-m);
  margin-right: var(--space-m);
}

.my-m {
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

/* padding */
.p-m {
  padding: var(--space-m);
}

.pt-m {
  padding-top: var(--space-m);
}

.pb-m {
  padding-bottom: var(--space-m);
}

.pr-m {
  padding-right: var(--space-m);
}

.pl-m {
  padding-left: var(--space-m);
}

.px-m {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

.py-m {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}

/* gap */
.gap-m {
  gap: calc(var(--space-m) * 2);
}

/* owl/stack  */
.stacky-m > * + * {
  margin-top: var(--space-m);
}

.stackx-m > * + * {
  margin-left: var(--space-m);
}

/* margin */
.m-l {
  margin: var(--space-l);
}

.mt-l {
  margin-top: var(--space-l);
}

.mb-l {
  margin-bottom: var(--space-l);
}

.mr-l {
  margin-right: var(--space-l);
}

.ml-l {
  margin-left: var(--space-l);
}

.mx-l {
  margin-left: var(--space-l);
  margin-right: var(--space-l);
}

.my-l {
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}

/* padding */
.p-l {
  padding: var(--space-l);
}

.pt-l {
  padding-top: var(--space-l);
}

.pb-l {
  padding-bottom: var(--space-l);
}

.pr-l {
  padding-right: var(--space-l);
}

.pl-l {
  padding-left: var(--space-l);
}

.px-l {
  padding-left: var(--space-l);
  padding-right: var(--space-l);
}

.py-l {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

/* gap */
.gap-l {
  gap: calc(var(--space-l) * 2);
}

/* owl/stack  */
.stacky-l > * + * {
  margin-top: var(--space-l);
}

.stackx-l > * + * {
  margin-left: var(--space-l);
}

/* margin */
.m-xl {
  margin: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* padding */
.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* gap */
.gap-xl {
  gap: calc(var(--space-xl) * 2);
}

/* owl/stack  */
.stacky-xl > * + * {
  margin-top: var(--space-xl);
}

.stackx-xl > * + * {
  margin-left: var(--space-xl);
}

/* margin */
.m-xxl {
  margin: var(--space-xxl);
}

.mt-xxl {
  margin-top: var(--space-xxl);
}

.mb-xxl {
  margin-bottom: var(--space-xxl);
}

.mr-xxl {
  margin-right: var(--space-xxl);
}

.ml-xxl {
  margin-left: var(--space-xxl);
}

.mx-xxl {
  margin-left: var(--space-xxl);
  margin-right: var(--space-xxl);
}

.my-xxl {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xxl);
}

/* padding */
.p-xxl {
  padding: var(--space-xxl);
}

.pt-xxl {
  padding-top: var(--space-xxl);
}

.pb-xxl {
  padding-bottom: var(--space-xxl);
}

.pr-xxl {
  padding-right: var(--space-xxl);
}

.pl-xxl {
  padding-left: var(--space-xxl);
}

.px-xxl {
  padding-left: var(--space-xxl);
  padding-right: var(--space-xxl);
}

.py-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

/* gap */
.gap-xxl {
  gap: calc(var(--space-xxl) * 2);
}

/* owl/stack  */
.stacky-xxl > * + * {
  margin-top: var(--space-xxl);
}

.stackx-xxl > * + * {
  margin-left: var(--space-xxl);
}

/* grid layout */
.grid-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.span-1 {
  grid-column: span 1;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.span-2 {
  grid-column: span 2;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.span-3 {
  grid-column: span 3;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.span-4 {
  grid-column: span 4;
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.span-5 {
  grid-column: span 5;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.span-6 {
  grid-column: span 6;
}

.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.span-7 {
  grid-column: span 7;
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.span-8 {
  grid-column: span 8;
}

.grid-9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.span-9 {
  grid-column: span 9;
}

.grid-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.span-10 {
  grid-column: span 10;
}

.grid-11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.span-11 {
  grid-column: span 11;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: span 12;
}

@media screen and (max-width: 1240px) {
  .grid-lb-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .span-lb-1 {
    grid-column: span 1;
  }
  .grid-lb-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .span-lb-2 {
    grid-column: span 2;
  }
  .grid-lb-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .span-lb-3 {
    grid-column: span 3;
  }
  .grid-lb-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .span-lb-4 {
    grid-column: span 4;
  }
  .grid-lb-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .span-lb-5 {
    grid-column: span 5;
  }
  .grid-lb-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .span-lb-6 {
    grid-column: span 6;
  }
  .grid-lb-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .span-lb-7 {
    grid-column: span 7;
  }
  .grid-lb-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
  .span-lb-8 {
    grid-column: span 8;
  }
  .grid-lb-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  .span-lb-9 {
    grid-column: span 9;
  }
  .grid-lb-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .span-lb-10 {
    grid-column: span 10;
  }
  .grid-lb-11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
  }
  .span-lb-11 {
    grid-column: span 11;
  }
  .grid-lb-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .span-lb-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 768px) {
  .grid-mb-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .span-mb-1 {
    grid-column: span 1;
  }
  .grid-mb-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .span-mb-2 {
    grid-column: span 2;
  }
  .grid-mb-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .span-mb-3 {
    grid-column: span 3;
  }
  .grid-mb-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .span-mb-4 {
    grid-column: span 4;
  }
  .grid-mb-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .span-mb-5 {
    grid-column: span 5;
  }
  .grid-mb-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .span-mb-6 {
    grid-column: span 6;
  }
  .grid-mb-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .span-mb-7 {
    grid-column: span 7;
  }
  .grid-mb-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
  .span-mb-8 {
    grid-column: span 8;
  }
  .grid-mb-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  .span-mb-9 {
    grid-column: span 9;
  }
  .grid-mb-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .span-mb-10 {
    grid-column: span 10;
  }
  .grid-mb-11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
  }
  .span-mb-11 {
    grid-column: span 11;
  }
  .grid-mb-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .span-mb-12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 480px) {
  .grid-sb-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .span-sb-1 {
    grid-column: span 1;
  }
  .grid-sb-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .span-sb-2 {
    grid-column: span 2;
  }
  .grid-sb-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .span-sb-3 {
    grid-column: span 3;
  }
  .grid-sb-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .span-sb-4 {
    grid-column: span 4;
  }
  .grid-sb-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .span-sb-5 {
    grid-column: span 5;
  }
  .grid-sb-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .span-sb-6 {
    grid-column: span 6;
  }
  .grid-sb-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .span-sb-7 {
    grid-column: span 7;
  }
  .grid-sb-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
  .span-sb-8 {
    grid-column: span 8;
  }
  .grid-sb-9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }
  .span-sb-9 {
    grid-column: span 9;
  }
  .grid-sb-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .span-sb-10 {
    grid-column: span 10;
  }
  .grid-sb-11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
  }
  .span-sb-11 {
    grid-column: span 11;
  }
  .grid-sb-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .span-sb-12 {
    grid-column: span 12;
  }
}
/* colors */
.cl-prim {
  color: var(--primary);
}

.bck-prim {
  background-color: var(--primary);
}

.bor-prim {
  border-color: var(--primary);
}

.cl-prim-alt {
  color: var(--primary-alt);
}

.bck-prim-alt {
  background-color: var(--primary-alt);
}

.bor-prim-alt {
  border-color: var(--primary-alt);
}

.cl-sec {
  color: var(--secondary);
}

.bck-sec {
  background-color: var(--secondary);
}

.bor-sec {
  border-color: var(--secondary);
}

.cl-sec-alt {
  color: var(--secondary-alt);
}

.bck-sec-alt {
  background-color: var(--secondary-alt);
}

.bor-sec-alt {
  border-color: var(--secondary-alt);
}

.cl-white {
  color: var(--white);
}

.bck-white {
  background-color: var(--white);
}

.bor-white {
  border-color: var(--white);
}

.cl-light {
  color: var(--light);
}

.bck-light {
  background-color: var(--light);
}

.bor-light {
  border-color: var(--light);
}

.cl-dark {
  color: var(--dark);
}

.bck-dark {
  background-color: var(--dark);
}

.bor-dark {
  border-color: var(--dark);
}

.cl-black {
  color: var(--black);
}

.bck-black {
  background-color: var(--black);
}

.bor-black {
  border-color: var(--black);
}

/* wrappers */
.wrap-lw {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wrap-l);
}

.wrap-mw {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wrap-m);
}

.wrap-sw {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wrap-s);
}

/* animation */
.in {
  opacity: 0;
  transition: opacity var(--speed) var(--timing);
}

.out {
  opacity: 1;
  transition: opacity var(--speed) var(--timing);
}

.up {
  transform: translateY(var(--distance));
  transition: transform var(--speed) var(--timing);
}

.down {
  transform: translateY(-var(--distance));
  transition: transform var(--speed) var(--timing);
}

.left {
  transform: translateX(var(--distance));
  transition: transform var(--speed) var(--timing);
}

.right {
  transform: translateX(-var(--distance));
  transition: transform var(--speed) var(--timing);
}

.in.show {
  opacity: 1;
}

.out.show {
  opacity: 0;
}

.up.show {
  transition: translateY(0);
}

.down.show {
  transition: translateY(0);
}

.left.show {
  transition: translateX(0);
}

.right.show {
  transition: translateX(0);
}

.delay-1 {
  transition-delay: calc(var(--delay) * 1);
}

.delay-2 {
  transition-delay: calc(var(--delay) * 2);
}

.delay-3 {
  transition-delay: calc(var(--delay) * 3);
}

.delay-4 {
  transition-delay: calc(var(--delay) * 4);
}

.delay-5 {
  transition-delay: calc(var(--delay) * 5);
}

.delay-6 {
  transition-delay: calc(var(--delay) * 6);
}

.delay-7 {
  transition-delay: calc(var(--delay) * 7);
}

.delay-8 {
  transition-delay: calc(var(--delay) * 8);
}

.delay-9 {
  transition-delay: calc(var(--delay) * 9);
}

.delay-10 {
  transition-delay: calc(var(--delay) * 10);
}

.delay-11 {
  transition-delay: calc(var(--delay) * 11);
}

.delay-12 {
  transition-delay: calc(var(--delay) * 12);
}

/*# sourceMappingURL=custom-oxygen.css.map */