@font-face {
  font-family: Aeonik;
  src: url("/assets/fonts/Aeonik-Regular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: Aeonik;
  src: url("/assets/fonts/Aeonik-Medium.woff2");
  font-weight: 500;
}


@font-face {
  font-family: Sticky-Notes;
  src: url("/assets/fonts/NanumPenScript-Regular.woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

a {
  text-decoration: none;
  color: unset;
}

:root {
  --grid-size: 12;
  --grid-gap-x: 1rem;
  --grid-gap-y: 1rem;
  --grid-gap-xy: var(--unit-32);
  --grid-container-max-width: 90%;
  --grid-container-padding-x: 1rem;
  --gap: 0px;

  --grid-space: 1rem;

  --color-gray-10: #f8f8f8;
  --color-gray-50: #f2f3f4;
  --color-gray-100: #e9ebee;
  --color-gray-300: #bec4ce;
  --color-gray-400: #afb7c3;
  --color-gray-500: #949faf;
  --color-gray-600: #697485;
  --color-gray-700: #4d5a6b;
  --color-gray-800: #374250;
  --color-gray-900: #1f2329;

  /* B&W */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Success */
  --color-success-10: #f8fefc;
  --color-success-50: #d4fbdc;
  --color-success-100: #3ad673;
  --color-success-300: #1cc259;
  --color-success-400: #16a34a;
  --color-success-500: #10863c;
  --color-success-600: #0a6a2e;
  --color-success-700: #065021;
  --color-success-800: #033915;
  --color-success-900: #012109;

  /* Info */
  --color-info-10: #f9fbff;
  --color-info-50: #edf0fe;
  --color-info-100: #dee5fe;
  --color-info-300: #99b1fc;
  --color-info-400: #7198fb;
  --color-info-500: #3c7ff9;
  --color-info-600: #1a67d9;
  --color-info-700: #114ca4;
  --color-info-800: #093475;
  --color-info-900: #031c44;

  /* Warning */
  --color-warning-10: #fffaf6;
  --color-warning-50: #fff1ec;
  --color-warning-100: #fddfc7;
  --color-warning-300: #f9ab6c;
  --color-warning-400: #f6892e;
  --color-warning-500: #f56f00;
  --color-warning-600: #c25700;
  --color-warning-700: #7c3700;
  --color-warning-800: #472000;
  --color-warning-900: #2a1300;

  /* Error */
  --color-error-10: #fff4f5;
  --color-error-50: #ffeced;
  --color-error-100: #ffddde;
  --color-error-300: #ff9696;
  --color-error-400: #ff6b6c;
  --color-error-500: #ff272c;
  --color-error-600: #da000b;
  --color-error-700: #a50006;
  --color-error-800: #750003;
  --color-error-900: #450001;

  --color-bg: #0a0c0a;
  --color-primary: rgb(238, 198, 90);
  --color-bg-2: rgba(255, 255, 255, 0.06);

  --unit-negative-4: -0.25rem;
  --unit-negative-2: -0.125rem;
  --unit-0: 0rem;
  --unit-1: 0.0625rem;
  --unit-2: 0.125rem;
  --unit-3: 0.1875rem;
  --unit-4: 0.25rem;
  --unit-5: 0.3125rem;
  --unit-6: 0.375rem;
  --unit-7: 0.4375rem;
  --unit-8: 0.5rem;
  --unit-9: 0.5625rem;
  --unit-10: 0.625rem;
  --unit-11: 0.6875rem;
  --unit-12: 0.75rem;
  --unit-13: 0.8125rem;
  --unit-14: 0.875rem;
  --unit-15: 0.9375rem;
  --unit-16: 1rem;
  --unit-17: 1.0625rem;
  --unit-18: 1.125rem;
  --unit-19: 1.1875rem;
  --unit-20: 1.25rem;
  --unit-21: 1.3125rem;
  --unit-22: 1.375rem;
  --unit-23: 1.4375rem;
  --unit-24: 1.5rem;
  --unit-26: 1.625rem;
  --unit-28: 1.75rem;
  --unit-30: 1.875rem;
  --unit-32: 2rem;
  --unit-36: 2.25rem;
  --unit-40: 2.5rem;
  --unit-48: 3rem;
  --unit-56: 3.5rem;
  --unit-64: 4rem;
  --unit-full: 99999px;
  --app-padding: var(--unit-16);

  --border-radius-12: var(--unit-12);
  --border-radius-20: var(--unit-20);
  --border-radius-40: var(--unit-40);

  --shadow-xs: 0px 2px 10px 0px rgba(89, 102, 120, 6%);
  --shadow-s: 0px 4px 15px 0px rgba(89, 102, 120, 7%);
  --shadow-m: 0px 8px 20px 0px rgba(89, 102, 120, 16%);
  --shadow-l: 0px 16px 25px 0px rgba(89, 102, 120, 11%);
  --shadow-xl: 0px 24px 30px 0px rgba(89, 102, 120, 13%);
  --shadow--xxl: 0px 2px 10px 3px rgba(89, 102, 120, 20%);

  --transition: 0.25s;

  --f: Aeonik, sans-serif;
}

@media (max-width: 63.9375rem) {
  :root {
    --grid-space: var(--unit-8);
    --grid-container-max-width: 100%;
  }
}

@media (min-width: 125em) {
  :root {
    --grid-container-max-width: 90%;
  }
}

.font-regular {
  font-family: var(--f);
  font-weight: 400;
}

.font-medium {
  font-family: var(--f);
  font-weight: 500;
}

.font-bold {
  font-family: var(--f);
  font-weight: 500;
}

.font-gray-800 {
  color: var(--color-gray-800);
}

.font-gray-700 {
  color: var(--color-gray-700);
}

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

/* ==========================================================================
   Font sizes (base — identice pe desktop și mobil)
   ========================================================================== */

.font-13 {
  font-size: var(--unit-13);
  line-height: calc(var(--unit-13) * 1.5);
}

.font-14 {
  font-size: var(--unit-14);
  line-height: calc(var(--unit-14) * 1.5);
}

.font-15 {
  font-size: var(--unit-15);
  line-height: calc(var(--unit-15) * 1.4);
}

.font-16 {
  font-size: var(--unit-16);
  line-height: calc(var(--unit-16) * 1.4);
}

.font-18 {
  font-size: var(--unit-18);
  line-height: calc(var(--unit-18) * 1.35);
}

.font-20 {
  font-size: var(--unit-20);
  line-height: calc(var(--unit-20) * 1.3);
}

.font-22 {
  font-size: var(--unit-22);
  line-height: calc(var(--unit-22) * 1.25);
}

.font-24 {
  font-size: var(--unit-24);
  line-height: calc(var(--unit-24) * 1.2);
}

.font-26 {
  font-size: var(--unit-26);
  line-height: calc(var(--unit-26) * 1.15);
}

.font-28 {
  font-size: var(--unit-28);
  line-height: calc(var(--unit-28) * 1.1);
}

.font-30 {
  font-size: var(--unit-30);
  line-height: calc(var(--unit-30) * 1.05);
}

.font-32 {
  font-size: var(--unit-32);
  line-height: calc(var(--unit-32) * 1);
}

.font-34 {
  font-size: var(--unit-34);
  line-height: calc(var(--unit-34) * 1);
}

.font-36 {
  font-size: var(--unit-36);
  line-height: calc(var(--unit-36) * 1);
}

/* ==========================================================================
   Font sizes — variante specifice pe breakpoint
   (13-18 rămân aceleași și pe mobil, dar am adăugat clasele oricum,
   pentru consistență, ca să poți combina liber small-font-x + large-font-x)
   ========================================================================== */

@media (min-width: 64rem) {
  .large-font-13 {
    font-size: var(--unit-13);
    line-height: calc(var(--unit-13) * 1.5);
  }
  .large-font-14 {
    font-size: var(--unit-14);
    line-height: calc(var(--unit-14) * 1.5);
  }
  .large-font-15 {
    font-size: var(--unit-15);
    line-height: calc(var(--unit-15) * 1.4);
  }
  .large-font-16 {
    font-size: var(--unit-16);
    line-height: calc(var(--unit-16) * 1.4);
  }
  .large-font-18 {
    font-size: var(--unit-18);
    line-height: calc(var(--unit-18) * 1.35);
  }
  .large-font-20 {
    font-size: var(--unit-20);
    line-height: calc(var(--unit-20) * 1.3);
  }
  .large-font-22 {
    font-size: var(--unit-22);
    line-height: calc(var(--unit-22) * 1.25);
  }
  .large-font-24 {
    font-size: var(--unit-24);
    line-height: calc(var(--unit-24) * 1.2);
  }
  .large-font-26 {
    font-size: var(--unit-26);
    line-height: calc(var(--unit-26) * 1.15);
  }
  .large-font-28 {
    font-size: var(--unit-28);
    line-height: calc(var(--unit-28) * 1.1);
  }
  .large-font-30 {
    font-size: var(--unit-30);
    line-height: calc(var(--unit-30) * 1.05);
  }
  .large-font-32 {
    font-size: var(--unit-32);
    line-height: calc(var(--unit-32) * 1);
  }
  .large-font-34 {
    font-size: var(--unit-34);
    line-height: calc(var(--unit-34) * 1);
  }
  .large-font-36 {
    font-size: var(--unit-36);
    line-height: calc(var(--unit-36) * 1);
  }
}

@media (max-width: 63.9375rem) {
  .small-font-13 {
    font-size: var(--unit-13);
    line-height: calc(var(--unit-13) * 1.5);
  }
  .small-font-14 {
    font-size: var(--unit-14);
    line-height: calc(var(--unit-14) * 1.5);
  }
  .small-font-15 {
    font-size: var(--unit-15);
    line-height: calc(var(--unit-15) * 1.4);
  }
  .small-font-16 {
    font-size: var(--unit-16);
    line-height: calc(var(--unit-16) * 1.4);
  }
  .small-font-18 {
    font-size: var(--unit-18);
    line-height: calc(var(--unit-18) * 1.35);
  }
  .small-font-20 {
    font-size: var(--unit-20);
    line-height: calc(var(--unit-20) * 1.3);
  }
  .small-font-22 {
    font-size: var(--unit-22);
    line-height: calc(var(--unit-22) * 1.25);
  }
  .small-font-24 {
    font-size: var(--unit-24);
    line-height: calc(var(--unit-24) * 1.2);
  }
  .small-font-26 {
    font-size: var(--unit-26);
    line-height: calc(var(--unit-26) * 1.15);
  }
  .small-font-28 {
    font-size: var(--unit-28);
    line-height: calc(var(--unit-28) * 1.1);
  }
  .small-font-30 {
    font-size: var(--unit-30);
    line-height: calc(var(--unit-30) * 1.05);
  }
  .small-font-32 {
    font-size: var(--unit-32);
    line-height: calc(var(--unit-32) * 1);
  }
  .small-font-34 {
    font-size: var(--unit-34);
    line-height: calc(var(--unit-34) * 1);
  }
  .small-font-36 {
    font-size: var(--unit-36);
    line-height: calc(var(--unit-36) * 1);
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --color-bg: #131413;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--f-r);
}

.gap-4 {
  gap: var(--unit-4);
}

.gap-8 {
  gap: var(--unit-8);
}

.gap-12 {
  gap: var(--unit-12);
}

.gap-16 {
  gap: var(--unit-16);
}

.gap-20 {
  gap: var(--unit-20);
}

.gap-24 {
  gap: var(--unit-24);
}

.gap-28 {
  gap: var(--unit-28);
}

.gap-32 {
  gap: var(--unit-32);
}

.gap-36 {
  gap: var(--unit-36);
}

.gap-40 {
  gap: var(--unit-40);
}

.gap-44 {
  gap: var(--unit-44);
}

.gap-48 {
  gap: var(--unit-48);
}

@media (min-width: 64rem) {
  .large-gap-4 {
    gap: var(--unit-4);
  }

  .large-gap-8 {
    gap: var(--unit-8);
  }

  .large-gap-12 {
    gap: var(--unit-12);
  }

  .large-gap-16 {
    gap: var(--unit-16);
  }

  .large-gap-20 {
    gap: var(--unit-20);
  }

  .large-gap-24 {
    gap: var(--unit-24);
  }

  .large-gap-28 {
    gap: var(--unit-28);
  }

  .large-gap-32 {
    gap: var(--unit-32);
  }

  .large-gap-36 {
    gap: var(--unit-36);
  }

  .large-gap-40 {
    gap: var(--unit-40);
  }

  .large-gap-44 {
    gap: var(--unit-44);
  }

  .large-gap-48 {
    gap: var(--unit-48);
  }
}

@media (max-width: 63.9375rem) {
  .small-gap-4 {
    gap: var(--unit-4);
  }

  .small-gap-8 {
    gap: var(--unit-8);
  }

  .small-gap-12 {
    gap: var(--unit-12);
  }

  .small-gap-16 {
    gap: var(--unit-16);
  }

  .small-gap-20 {
    gap: var(--unit-20);
  }

  .small-gap-24 {
    gap: var(--unit-24);
  }

  .small-gap-28 {
    gap: var(--unit-28);
  }

  .small-gap-32 {
    gap: var(--unit-32);
  }

  .small-gap-36 {
    gap: var(--unit-36);
  }

  .small-gap-40 {
    gap: var(--unit-40);
  }

  .small-gap-44 {
    gap: var(--unit-44);
  }

  .small-gap-48 {
    gap: var(--unit-48);
  }
}

/* =============================================== Padding */

.padding-x-4 {
  padding-left: var(--unit-4);
  padding-right: var(--unit-4);
}

.padding-y-4 {
  padding-top: var(--unit-4);
  padding-bottom: var(--unit-4);
}

.padding-xy-4 {
  padding: var(--unit-4) var(--unit-4);
}

.padding-x-8 {
  padding-left: var(--unit-8);
  padding-right: var(--unit-8);
}

.padding-y-8 {
  padding-top: var(--unit-8);
  padding-bottom: var(--unit-8);
}

.padding-xy-8 {
  padding: var(--unit-8) var(--unit-8);
}

.padding-x-12 {
  padding-left: var(--unit-12);
  padding-right: var(--unit-12);
}

.padding-y-12 {
  padding-top: var(--unit-12);
  padding-bottom: var(--unit-12);
}

.padding-xy-12 {
  padding: var(--unit-12) var(--unit-12);
}

.padding-x-16 {
  padding-left: var(--unit-16);
  padding-right: var(--unit-16);
}

.padding-y-16 {
  padding-top: var(--unit-16);
  padding-bottom: var(--unit-16);
}

.padding-xy-16 {
  padding: var(--unit-16) var(--unit-16);
}

.padding-x-20 {
  padding-left: var(--unit-20);
  padding-right: var(--unit-20);
}

.padding-y-20 {
  padding-top: var(--unit-20);
  padding-bottom: var(--unit-20);
}

.padding-xy-20 {
  padding: var(--unit-20) var(--unit-20);
}

/* =============================================== Margin */

.margin-bottom-4 > *:not(:last-child) {
  margin-bottom: var(--unit-4);
}

.margin-bottom-8 > *:not(:last-child) {
  margin-bottom: var(--unit-8);
}

.margin-bottom-12 > *:not(:last-child) {
  margin-bottom: var(--unit-12);
}

.margin-bottom-16 > *:not(:last-child) {
  margin-bottom: var(--unit-16);
}

.margin-bottom-20 > *:not(:last-child) {
  margin-bottom: var(--unit-20);
}

.margin-bottom-24 > *:not(:last-child) {
  margin-bottom: var(--unit-24);
}

.margin-bottom-28 > *:not(:last-child) {
  margin-bottom: var(--unit-28);
}

.margin-bottom-32 > *:not(:last-child) {
  margin-bottom: var(--unit-32);
}

.margin-bottom-36 > *:not(:last-child) {
  margin-bottom: var(--unit-36);
}

.margin-bottom-40 > *:not(:last-child) {
  margin-bottom: var(--unit-40);
}

.margin-bottom-44 > *:not(:last-child) {
  margin-bottom: var(--unit-44);
}

.margin-bottom-48 > *:not(:last-child) {
  margin-bottom: var(--unit-48);
}

@media (min-width: 64rem) {
  .large-margin-bottom-4 > *:not(:last-child) {
    margin-bottom: var(--unit-4);
  }

  .large-margin-bottom-8 > *:not(:last-child) {
    margin-bottom: var(--unit-8);
  }

  .large-margin-bottom-12 > *:not(:last-child) {
    margin-bottom: var(--unit-12);
  }

  .large-margin-bottom-16 > *:not(:last-child) {
    margin-bottom: var(--unit-16);
  }

  .large-margin-bottom-20 > *:not(:last-child) {
    margin-bottom: var(--unit-20);
  }

  .large-margin-bottom-24 > *:not(:last-child) {
    margin-bottom: var(--unit-24);
  }

  .large-margin-bottom-28 > *:not(:last-child) {
    margin-bottom: var(--unit-28);
  }

  .large-margin-bottom-32 > *:not(:last-child) {
    margin-bottom: var(--unit-32);
  }

  .large-margin-bottom-36 > *:not(:last-child) {
    margin-bottom: var(--unit-36);
  }

  .large-margin-bottom-40 > *:not(:last-child) {
    margin-bottom: var(--unit-40);
  }

  .large-margin-bottom-44 > *:not(:last-child) {
    margin-bottom: var(--unit-44);
  }

  .large-margin-bottom-48 > *:not(:last-child) {
    margin-bottom: var(--unit-48);
  }
}

@media (max-width: 63.9375rem) {
  .small-margin-bottom-4 > *:not(:last-child) {
    margin-bottom: var(--unit-4);
  }

  .small-margin-bottom-8 > *:not(:last-child) {
    margin-bottom: var(--unit-8);
  }

  .small-margin-bottom-12 > *:not(:last-child) {
    margin-bottom: var(--unit-12);
  }

  .small-margin-bottom-16 > *:not(:last-child) {
    margin-bottom: var(--unit-16);
  }

  .small-margin-bottom-20 > *:not(:last-child) {
    margin-bottom: var(--unit-20);
  }

  .small-margin-bottom-24 > *:not(:last-child) {
    margin-bottom: var(--unit-24);
  }

  .small-margin-bottom-28 > *:not(:last-child) {
    margin-bottom: var(--unit-28);
  }

  .small-margin-bottom-32 > *:not(:last-child) {
    margin-bottom: var(--unit-32);
  }

  .small-margin-bottom-36 > *:not(:last-child) {
    margin-bottom: var(--unit-36);
  }

  .small-margin-bottom-40 > *:not(:last-child) {
    margin-bottom: var(--unit-40);
  }

  .small-margin-bottom-44 > *:not(:last-child) {
    margin-bottom: var(--unit-44);
  }

  .small-margin-bottom-48 > *:not(:last-child) {
    margin-bottom: var(--unit-48);
  }
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.x-left {
  justify-content: flex-start;
}

.x-center {
  justify-content: center;
}

.x-right {
  justify-content: flex-end;
}

.y-top {
  align-items: flex-start;
}

.y-center {
  align-items: center;
}

.y-bottom {
  align-items: flex-end;
}

.xy-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.space-between {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

.flex-column.y-center {
  justify-content: center;
  align-items: initial;
}

.flex-column.x-center {
  align-items: center;
  justify-content: initial;
}

.flex-column.x-right {
  align-items: flex-end;
  justify-content: initial;
}

.flex-column.y-bottom {
  justify-content: flex-end;
  align-items: initial;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.gap-negative-4 {
  --gap: var(--unit-negative-4);
  gap: var(--unit-negative-4);
}

.gap-negative-2 {
  --gap: var(--unit-negative-2);
  gap: var(--unit-negative-2);
}

.gap-0 {
  --gap: var(--unit-0);
  gap: var(--unit-0);
}

.gap-2 {
  --gap: var(--unit-2);
  gap: var(--unit-2);
}

.gap-4 {
  --gap: var(--unit-4);
  gap: var(--unit-4);
}

.gap-8 {
  --gap: var(--unit-8);
  gap: var(--unit-8);
}

.gap-12 {
  --gap: var(--unit-12);
  gap: var(--unit-12);
}

.gap-16 {
  --gap: var(--unit-16);
  gap: var(--unit-16);
}

.gap-20 {
  --gap: var(--unit-20);
  gap: var(--unit-20);
}

.gap-24 {
  --gap: var(--unit-24);
  gap: var(--unit-24);
}

.gap-28 {
  --gap: var(--unit-28);
  gap: var(--unit-28);
}

.gap-32 {
  --gap: var(--unit-32);
  gap: var(--unit-32);
}

.gap-40 {
  --gap: var(--unit-40);
  gap: var(--unit-40);
}

.gap-48 {
  --gap: var(--unit-48);
  gap: var(--unit-48);
}

.gap-56 {
  --gap: var(--unit-56);
  gap: var(--unit-56);
}

.gap-64 {
  --gap: var(--unit-64);
  gap: var(--unit-64);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.grid-1 > div {
  width: 100%;
}

.grid-2 > div {
  width: calc((100% / 2) - calc(var(--gap) / 2));
}

.grid-3 > div {
  width: calc((100% / 3) - (var(--gap) * 2 / 3));
}

.grid-4 > div {
  width: calc((100% / 4) - (var(--gap) * 3 / 4));
}

.grid-5 > div {
  width: calc((100% / 5) - (var(--gap) * 4 / 5));
}

.grid-6 > div {
  width: calc((100% / 6) - (var(--gap) * 5 / 6));
}

.grid-7 > div {
  width: calc((100% / 7) - (var(--gap) * 6 / 7));
}

.grid-8 > div {
  width: calc((100% / 8) - (var(--gap) * 7 / 8));
}

.grid-9 > div {
  width: calc((100% / 9) - (var(--gap) * 8 / 9));
}

.grid-10 > div {
  width: calc((100% / 10) - (var(--gap) * 9 / 10));
}

.grid-11 > div {
  width: calc((100% / 11) - (var(--gap) * 10 / 11));
}

.grid-12 > div {
  width: calc((100% / 12) - (var(--gap) * 11 / 12));
}

.padding-x-4 {
  padding-left: var(--unit-4);
  padding-right: var(--unit-4);
}

.padding-y-4 {
  padding-top: var(--unit-4);
  padding-bottom: var(--unit-4);
}

.padding-xy-4 {
  padding: var(--unit-4) var(--unit-4);
}

.padding-x-8 {
  padding-left: var(--unit-8);
  padding-right: var(--unit-8);
}

.padding-y-8 {
  padding-top: var(--unit-8);
  padding-bottom: var(--unit-8);
}

.padding-xy-8 {
  padding: var(--unit-8) var(--unit-8);
}

.padding-x-12 {
  padding-left: var(--unit-12);
  padding-right: var(--unit-12);
}

.padding-y-12 {
  padding-top: var(--unit-12);
  padding-bottom: var(--unit-12);
}

.padding-xy-12 {
  padding: var(--unit-12) var(--unit-12);
}

.padding-x-16 {
  padding-left: var(--unit-16);
  padding-right: var(--unit-16);
}

.padding-y-16 {
  padding-top: var(--unit-16);
  padding-bottom: var(--unit-16);
}

.padding-xy-16 {
  padding: var(--unit-16) var(--unit-16);
}

.padding-x-20 {
  padding-left: var(--unit-20);
  padding-right: var(--unit-20);
}

.padding-y-20 {
  padding-top: var(--unit-20);
  padding-bottom: var(--unit-20);
}

.padding-xy-20 {
  padding: var(--unit-20) var(--unit-20);
}

.font-gray-700 {
  color: var(--color-gray-700);
}

.font-success-700 {
  color: var(--color-success-700);
}

.font-gray-900 {
  color: var(--color-gray-900);
}

.border-2 {
  border-radius: var(--unit-2);
}

.border-4 {
  border-radius: var(--unit-4);
}

.border-8 {
  border-radius: var(--unit-8);
}

.border-12 {
  border-radius: var(--unit-12);
}

.border-16 {
  border-radius: var(--unit-16);
}

.border-full {
  border-radius: 100vw;
}

ul {
  list-style-type: none;
}

.grid-container {
  max-width: var(--grid-container-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-container-padding-x);
}

.grid-container.full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.grid-container.fluid {
  max-width: 100%;
}

.grid {
  --c-gap: var(--column-gap, var(--gap));
  --r-gap: var(--row-gap, var(--gap));
  --cols: var(--columns);
  display: flex;
  flex-flow: row wrap;
  column-gap: var(--c-gap);
  row-gap: var(--r-gap);
}

.grid .grid:not([style*="gap"]) {
  --gap: 0px;
  --column-gap: 0px;
  --row-gap: 0px;
}

.grid > .cell {
  flex: 0 0 auto;
  min-height: 0px;
  min-width: 0px;
  width: 100%;
  max-width: 100%;
}

.grid[style*="--columns"] > .cell {
  width: calc(
    (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
  );
}

.grid > .cell[style*="--column"] {
  --col: var(--column);
  --cols: calc(var(--grid-size)/var(--col));
  width: calc(
    (100% / (var(--grid-size) / var(--col))) -
      (var(--c-gap) - var(--c-gap) / var(--cols))
  );
}

.grid.grid-gap-x {
  --c-gap: var(--grid-gap-x);
}

.grid.grid-gap-y {
  --r-gap: var(--grid-gap-y);
}

.grid.grid-gap-xy {
  --gap: var(--grid-gap-xy);
}

.grid > .cell.shrink {
  width: auto;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-column {
  flex-direction: column;
}

.flex-column.y-center {
  justify-content: center;
  align-items: initial;
}

.flex-column.x-center {
  align-items: center;
  justify-content: initial;
}

.flex-column.x-right {
  align-items: flex-end;
  justify-content: initial;
}

.flex-column.y-bottom {
  justify-content: flex-end;
  align-items: initial;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.x-left {
  justify-content: flex-start;
}

.x-center {
  justify-content: center;
}

.x-right {
  justify-content: flex-end;
}

.y-top {
  align-items: flex-start;
}

.y-center {
  align-items: center;
}

.y-bottom {
  align-items: flex-end;
}

.xy-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.space-between {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

@media (max-width: 63.9375rem) {
  .grid-container.small-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .grid-container.small-fluid {
    max-width: 100%;
  }

  .grid {
    --c-gap: var(
      --small-column-gap,
      var(--small-gap, var(--column-gap, var(--gap)))
    );
    --r-gap: var(--small-row-gap, var(--small-gap, var(--row-gap, var(--gap))));
    --cols: var(--small-columns, var(--columns));
  }

  .grid[style*="--small-columns"] > .cell {
    width: calc(
      (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
    );
  }

  .grid > .cell[style*="--small-occupies"] {
    --col: var(--small-column, var(--column));
    --cols: calc(var(--grid-size)/var(--col));
    width: calc(
      (100% / (var(--grid-size) / var(--col))) -
        (var(--c-gap) - var(--c-gap) / var(--cols))
    );
  }

  .grid.small-grid-gap-x {
    --c-gap: var(--grid-gap-x);
  }

  .grid.small-grid-gap-y {
    --r-gap: var(--grid-gap-y);
  }

  .grid.small-grid-gap-xy {
    --gap: var(--grid-gap-xy);
  }

  .grid > .cell.small-shrink {
    width: auto;
  }

  .small-flex {
    display: flex;
  }

  .small-inline-flex {
    display: inline-flex;
  }

  .small-flex-wrap {
    flex-wrap: wrap;
  }

  .small-flex-no-wrap {
    flex-wrap: nowrap;
  }

  .small-flex-column {
    flex-direction: column;
  }

  .small-flex-column.y-center,
  .small-flex-column.small-y-center {
    justify-content: center;
    align-items: initial;
  }

  .small-flex-column.x-center,
  .small-flex-column.small-x-center {
    align-items: center;
    justify-content: initial;
  }

  .small-flex-column.x-right,
  .small-flex-column.small-x-right {
    align-items: flex-end;
    justify-content: initial;
  }

  .small-flex-column.y-bottom,
  .small-flex-column.small-y-bottom {
    justify-content: flex-end;
    align-items: initial;
  }

  .small-text-center {
    text-align: center;
  }

  .small-text-left {
    text-align: left;
  }

  .small-text-right {
    text-align: right;
  }

  .small-x-left {
    justify-content: flex-start;
  }

  .small-x-center {
    justify-content: center;
  }

  .small-x-right {
    justify-content: flex-end;
  }

  .small-y-top {
    align-items: flex-start;
  }

  .small-y-center {
    align-items: center;
  }

  .small-y-bottom {
    align-items: flex-end;
  }

  .small-xy-center {
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .small-space-between {
    justify-content: space-between;
  }

  .small-align-spaced {
    justify-content: space-around;
  }
}

@media (min-width: 64rem) {
  .grid-container.large-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .grid-container.large-fluid {
    max-width: 100%;
  }

  .grid {
    --c-gap: var(
      --large-column-gap,
      var(--large-gap, var(--column-gap, var(--gap)))
    );
    --r-gap: var(--large-row-gap, var(--large-gap, var(--row-gap, var(--gap))));
    --cols: var(--large-columns, var(--columns));
  }

  .grid[style*="--large-columns"] > .cell {
    width: calc(
      (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
    );
  }

  .grid > .cell[style*="--large-column"] {
    --col: var(--large-column, var(--column));
    --cols: calc(var(--grid-size)/var(--col));
    width: calc(
      (100% / (var(--grid-size) / var(--col))) -
        (var(--c-gap) - var(--c-gap) / var(--cols))
    );
  }

  .grid.large-grid-gap-x {
    --c-gap: var(--grid-gap-x);
  }

  .grid.large-grid-gap-y {
    --r-gap: var(--grid-gap-y);
  }

  .grid.large-grid-gap-xy {
    --gap: var(--grid-gap-xy);
  }

  .grid > .cell.large-shrink {
    width: auto;
  }

  .large-flex {
    display: flex;
  }

  .large-inline-flex {
    display: inline-flex;
  }

  .large-flex-column {
    flex-direction: column;
  }

  .large-flex-wrap {
    flex-wrap: wrap;
  }

  .large-flex-no-wrap {
    flex-wrap: nowrap;
  }

  .large-flex-column {
    flex-direction: column;
  }

  .large-flex-column.y-center,
  .large-flex-column.large-y-center {
    justify-content: center;
    align-items: initial;
  }

  .large-flex-column.x-center,
  .large-flex-column.large-x-center {
    align-items: center;
    justify-content: initial;
  }

  .large-flex-column.x-right,
  .large-flex-column.large-x-right {
    align-items: flex-end;
    justify-content: initial;
  }

  .large-flex-column.y-bottom,
  .large-flex-column.large-y-bottom {
    justify-content: flex-end;
    align-items: initial;
  }

  .large-text-center {
    text-align: center;
  }

  .large-text-left {
    text-align: left;
  }

  .large-text-right {
    text-align: right;
  }

  .large-x-left {
    justify-content: flex-start;
  }

  .large-x-center {
    justify-content: center;
  }

  .large-x-right {
    justify-content: flex-end;
  }

  .large-y-top {
    align-items: flex-start;
  }

  .large-y-center {
    align-items: center;
  }

  .large-y-bottom {
    align-items: flex-end;
  }

  .large-xy-center {
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .large-space-between {
    justify-content: space-between;
  }

  .large-align-spaced {
    justify-content: space-around;
  }
}

@media (min-width: 45rem) and (max-width: 64rem) and (orientation: portrait) {
  .grid {
    --c-gap: var(
      --medium-column-gap,
      var(--medium-gap, var(--column-gap, var(--gap)))
    );
    --r-gap: var(
      --medium-row-gap,
      var(--medium-gap, var(--row-gap, var(--gap)))
    );
    --cols: var(--medium-columns, var(--columns));
  }

  .grid[style*="--medium-columns"] > .cell {
    width: calc(
      (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
    );
  }

  .grid > .cell[style*="--medium-column"] {
    --col: var(--medium-column, var(--column));
    --cols: calc(var(--grid-size)/var(--col));
    width: calc(
      (100% / (var(--grid-size) / var(--col))) -
        (var(--c-gap) - var(--c-gap) / var(--cols))
    );
  }

  .grid.large-grid-gap-x {
    --c-gap: var(--grid-gap-x);
  }
}

@media (min-width: 73.8125rem) and (max-width: 100rem) and (orientation: landscape) {
  .grid {
    --c-gap: var(
      --mdpi-column-gap,
      var(--mdpi-gap, var(--column-gap, var(--gap)))
    );
    --r-gap: var(--mdpi-row-gap, var(--mdpi-gap, var(--row-gap, var(--gap))));
    --cols: var(--mdpi-columns, var(--columns));
  }

  .grid[style*="--mdpi-columns"] > .cell {
    width: calc(
      (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
    );
  }

  .grid > .cell[style*="--mdpi-column"] {
    --col: var(--mdpi-column, var(--column));
    --cols: calc(var(--grid-size)/var(--col));
    width: calc(
      (100% / (var(--grid-size) / var(--col))) -
        (var(--c-gap) - var(--c-gap) / var(--cols))
    );
  }

  .grid.large-grid-gap-x {
    --c-gap: var(--grid-gap-x);
  }
}

@media (min-width: 64rem) and (max-width: 73.75rem) and (orientation: landscape) {
  .grid {
    --c-gap: var(
      --medium-landscape-column-gap,
      var(--medium-landscape-gap, var(--column-gap, var(--gap)))
    );
    --r-gap: var(
      --medium-landscape-row-gap,
      var(--medium-landscape-gap, var(--row-gap, var(--gap)))
    );
    --cols: var(--medium-landscape-columns, var(--columns));
  }

  .grid[style*="--medium-landscape-columns"] > .cell {
    width: calc(
      (100% / var(--cols)) - ((var(--c-gap) * (var(--cols) - 1)) / var(--cols))
    );
  }

  .grid > .cell[style*="--medium-landscape-column"] {
    --col: var(--medium-landscape-column, var(--column));
    --cols: calc(var(--grid-size)/var(--col));
    width: calc(
      (100% / (var(--grid-size) / var(--col))) -
        (var(--c-gap) - var(--c-gap) / var(--cols))
    );
  }

  .grid.large-grid-gap-x {
    --c-gap: var(--grid-gap-x);
  }
}

@media (min-width: 1024px) {
  .grid-container > *:not(:last-child) {
    margin-bottom: 10rem;
  }
}

.swiper-button-next,
.swiper-button-prev,
.swiper-button-next::after,
.swiper-button-prev::after {
  position: relative;
  top: unset;
  left: unset;
  margin: unset;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: var(--color-info-100);
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.swiper-toggle {
  gap: var(--unit-40);
  justify-content: center;
  margin-bottom: 2rem;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 2rem;
}

.swiper-pagination {
  position: relative;
  margin-top: 1rem;
}

@media (max-width: 1023px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 3rem;
    height: 3rem;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 1.5rem;
  }
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}