:root{
/* =========================================================
  🧩 Font Sizes
========================================================= */ 
@media (min-width: 1px) and (max-width: 380px) {
  /* Headline font sizes */
  --fs-main-nr: clamp(12rem, 1rem + 2.5vw, 16rem);
  --fs-main-header: clamp(1.90rem, 1rem + 2.5vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1rem + 4vw, 3.375rem);
  --fs-h2: clamp(2.15rem, 1rem + 2vw, 2.85rem);
  --fs-h3: clamp(1.75rem, 0.9rem + 1.5vw, 2.10rem);
  --fs-h4: clamp(1.55rem, 0.8rem + 1vw, 1.875rem);
  --fs-h5: clamp(1.125rem, 0.7rem + 0.8vw, 1.5rem);
  --fs-h6: clamp(1.250rem, 0.6rem + 0.6vw, 1.25rem);
  --fs-h7: clamp(1rem, 0.5rem + 0.5vw, 1.0625rem);
  --fs-small-headline: var(--space-18);

  /* Paragraph font sizes */
  --fs-xxs: clamp(0.55rem, 0.45rem + 0.3vw, 0.625rem);
  --fs-xs: clamp(0.75rem, 0.55rem + 0.3vw, 0.75rem);
  --fs-s: clamp(0.90rem, 0.6rem + 0.4vw, 0.975rem);
  --fs-m: clamp(1.05rem, 0.7rem + 0.5vw, 1.025rem);
  --fs-l: clamp(1.10rem, 0.85rem + 0.5vw, 1.20rem);
  --fs-xl: clamp(1.325rem, 0.9rem + 0.7vw, 1.325rem);
  --fs-xxl: clamp(1.45rem, 1rem + 1vw, 1.5rem);
}

@media (min-width: 381px) and (max-width: 640px) {
  /* 🧭 Headery */
  --fs-main-nr: clamp(16rem, 0.8rem + 1.5vw, 24rem);
  --fs-main-header: clamp(var(--space-30), 3.0rem + 2.0vw, var(--space-32));
  --fs-h1: clamp(var(--space-36), 2.3rem + 0.7vw, var(--space-40));
  --fs-h2: clamp(var(--space-30), 2.1rem + 0.6vw, var(--space-34));
  --fs-h3: clamp(var(--space-24), 1.9rem + 0.5vw, var(--space-28));
  --fs-h4: clamp(var(--space-24), 1.6rem + 0.4vw, var(--space-24));
  --fs-h5: clamp(var(--space-22), 1.1rem + 0.4vw, var(--space-24));
  --fs-h6: clamp(var(--space-18), 1rem + 0.3vw, var(--space-20)); 
  --fs-h7: clamp(var(--space-20), 0.95rem + 0.3vw, var(--space-22));
  --fs-small-headline: var(--space-18);

  /* 🔠 Teksty */
  --fs-xxl: clamp(var(--space-20), 1.05rem + 0.4vw, var(--space-22));        /* 18–22px */
  --fs-xl:  clamp(var(--space-20), 1rem + 0.35vw, var(--space-20));          /* 16–18px */
  --fs-l:   clamp(var(--space-18), 0.85rem + 0.3vw, var(--space-20));        /* 14–16px */
  --fs-m:   clamp(var(--space-18), 0.75rem + 0.3vw, var(--space-18));   
  --fs-s:   clamp(var(--space-14), 0.65rem + 0.3vw, var(--space-16));
  --fs-xs:  clamp(var(--space-12), 0.55rem + 0.2vw, var(--space-14));
  --fs-xxs: clamp(var(--space-10), 0.5rem + 0.2vw, var(--space-12));
}

@media (min-width:641px) and (max-width: 900px) {
  /* 🧭 Headery */
  --fs-main-nr: clamp(25rem, 0.8rem + 1.5vw, 32rem);
  --fs-main-header: clamp(var(--space-30), 3.3rem + 0.8vw, var(--space-32));
  --fs-h1: clamp(var(--space-36), 2.3rem + 0.7vw, var(--space-40));
  --fs-h2: clamp(var(--space-32), 2.1rem + 0.6vw, var(--space-36));
  --fs-h3: clamp(var(--space-28), 1.9rem + 0.5vw, var(--space-28));
  --fs-h4: clamp(var(--space-24), 1.6rem + 0.4vw, var(--space-24));
  --fs-h5: clamp(var(--space-18), 1.1rem + 0.4vw, var(--space-20));
  --fs-h6: clamp(var(--space-16), 1rem + 0.3vw, var(--space-18)); 
  --fs-h7: clamp(var(--space-16), 0.95rem + 0.3vw, var(--space-18));
  --fs-small-headline: var(--space-18);

  /* 🔠 Teksty */
  --fs-xxl: clamp(var(--space-18), 1.05rem + 0.4vw, var(--space-22));        /* 18–22px */
  --fs-xl:  clamp(var(--space-18), 1rem + 0.35vw, var(--space-18));          /* 16–18px */
  --fs-l:   clamp(var(--space-14), 0.85rem + 0.3vw, var(--space-16));        /* 14–16px */
  --fs-m:   clamp(var(--space-14), 0.75rem + 0.3vw, var(--space-16));   
  --fs-s:   clamp(var(--space-12), 0.65rem + 0.3vw, var(--space-14));
  --fs-xs:  clamp(var(--space-10), 0.55rem + 0.2vw, var(--space-12));
  --fs-xxs: clamp(var(--space-8), 0.5rem + 0.2vw, var(--space-10));
}


@media (min-width:901px) and (max-width: 1023px) {
  /* 🧭 Headery */
  --fs-main-nr: clamp(28rem, 0.8rem + 1.5vw, 30rem);
  --fs-main-header: clamp(var(--space-44), 3.3rem + 0.8vw, var(--space-48));
  --fs-h1: clamp(var(--space-36), 2.3rem + 0.7vw, var(--space-40));
  --fs-h2: clamp(var(--space-32), 2.1rem + 0.6vw, var(--space-36));
  --fs-h3: clamp(var(--space-28), 1.9rem + 0.5vw, var(--space-28));
  --fs-h4: clamp(var(--space-24), 1.6rem + 0.4vw, var(--space-24));
  --fs-h5: clamp(var(--space-18), 1.1rem + 0.4vw, var(--space-20));
  --fs-h6: clamp(var(--space-16), 1rem + 0.3vw, var(--space-18)); 
  --fs-h7: clamp(var(--space-16), 0.95rem + 0.3vw, var(--space-18));
  --fs-small-headline: var(--space-16);

  /* 🔠 Teksty */
  --fs-xxl: clamp(var(--space-18), 1.05rem + 0.4vw, var(--space-22));
  --fs-xl:  clamp(var(--space-16), 0.9rem + 0.3vw, var(--space-18));
  --fs-l:   clamp(var(--space-14), 0.85rem + 0.3vw, var(--space-16));
  --fs-m:   clamp(var(--space-14), 0.75rem + 0.25vw, var(--space-14));
  --fs-s:   clamp(var(--space-12), 0.6rem + 0.2vw, var(--space-14));
  --fs-xs:  clamp(var(--space-8), 0.5rem + 0.2vw, var(--space-10));
  --fs-xxs: clamp(var(--space-8), 0.45rem + 0.15vw, var(--space-10));
}



@media (min-width: 1024px) and (max-width: 1199px) {
  /* 🧭 Headery */
  --fs-main-nr: clamp(34rem, 0.8rem + 1.5vw, 40rem);
  --fs-main-header: clamp(var(--space-48), 3.3rem + 0.8vw, var(--space-52)); /* 44–48px */
  --fs-h1: clamp(var(--space-44), 2.4rem + 0.7vw, var(--space-48));          /* 44–48px */
  --fs-h2: clamp(var(--space-36), 2.1rem + 0.6vw, var(--space-42));          /* 40–46px */
  --fs-h3: clamp(var(--space-26), 1.9rem + 0.5vw, var(--space-28));          /* 28–34px */
  --fs-h4: clamp(var(--space-24), 1.6rem + 0.4vw, var(--space-28));          /* 24–28px */
  --fs-h5: clamp(var(--space-16), 1.1rem + 0.4vw, var(--space-20));          /* 18–22px */
  --fs-h6: clamp(var(--space-16), 1rem + 0.3vw, var(--space-18));            /* 16–18px */
  --fs-h7: clamp(var(--space-14), 0.95rem + 0.3vw, var(--space-16));         /* 14–16px */
  --fs-small-headline: var(--space-16);

  /* 🔠 Teksty (od największego do najmniejszego) */
  --fs-xxl: clamp(var(--space-18), 1.05rem + 0.4vw, var(--space-22));        /* 18–22px */
  --fs-xl:  clamp(var(--space-18), 1rem + 0.35vw, var(--space-18));          /* 16–18px */
  --fs-l:   clamp(var(--space-16), 0.85rem + 0.3vw, var(--space-18));        /* 14–16px */
  --fs-m:   clamp(var(--space-16), 0.75rem + 0.25vw, var(--space-16));       /* 12–14px */
  --fs-s:   clamp(var(--space-12), 0.65rem + 0.2vw, var(--space-14));        /* 10–12px */
  --fs-xs:  clamp(var(--space-8), 0.55rem + 0.2vw, var(--space-10));         /* 8–10px */
  --fs-xxs: clamp(var(--space-8), 0.45rem + 0.2vw, var(--space-10));
}


@media (min-width: 1200px) {
  /* 🧭 Headery */
  --fs-main-nr: clamp(34rem, 0.8rem + 1.5vw, 40rem);
  --fs-main-header: clamp(var(--space-54), 3.6rem + 0.8vw, var(--space-58)); 
  --fs-h1: clamp(var(--space-48), 2.6rem + 0.8vw, var(--space-54));
  --fs-h2: clamp(var(--space-42), 2.2rem + 0.5vw, var(--space-48));
  --fs-h3: clamp(var(--space-28), 2.2rem + 0.5vw, var(--space-32));
  --fs-h4: clamp(var(--space-24), 1.7rem + 0.4vw, var(--space-32)); 
  --fs-h5: clamp(var(--space-20), 1.1rem + 0.4vw, var(--space-22));
  --fs-h6: var(--space-20);
  --fs-h7: clamp(var(--space-14), 1rem + 0.3vw, var(--space-18));
  --fs-small-headline: var(--space-18);


  /* 🔠 Teksty (od największego do najmniejszego) */
  --fs-xxl: clamp(var(--space-20), 1.1rem + 0.5vw, var(--space-24)); 
  --fs-xl:  clamp(var(--space-18), 1.1rem + 0.3vw, var(--space-20));   
  --fs-l:   clamp(var(--space-14), 0.75rem + 0.3vw, var(--space-18));
  --fs-m:   clamp(var(--space-12), 0.75rem + 0.3vw, var(--space-16));   
  --fs-s:   clamp(var(--space-12), 0.65rem + 0.3vw, var(--space-14));
  --fs-xs:  clamp(var(--space-10), 0.55rem + 0.2vw, var(--space-12));
  --fs-xxs: clamp(var(--space-8), 0.5rem + 0.2vw, var(--space-10)); 
}

@media (min-width: 1480px) {
  --fs-main-header: var(--space-64);
  --fs-h1: var(--space-54);
  --fs-h2: var(--space-44);
}







/* =========================================================
  🧩 Headings
========================================================= */ 
/* 
    👉 Main header black 
*/
 --mh-font: var(--fw-900) var(--fs-main-header)/var(--lh-120) var(--ff-header);
--mh-ls: var(--ls-035); 

/* 
    👉 Headline H1 
*/
--h1-font: var(--fw-900) var(--fs-h1)/var(--lh-125) var(--ff-header);
--h1-ls: var(--ls-055);

/* 
    👉 Headline H2 
*/
--h2-font: var(--fw-900) var(--fs-h2)/var(--lh-120) var(--ff-header);
--h2-ls: var(--ls-055);

/* 
    👉 Headline H3 
*/
--h3-font: var(--fw-900) var(--fs-h3)/var(--lh-130) var(--ff-header);
--h3-ls: var(--ls-055);

/* 
    👉 Headline H4 
*/
          --h4-font: var(--fw-900) var(--fs-h4)/var(--lh-130) var(--ff-header);
          --h4-ls: var(--ls-035);

/* 
    👉 Headline H5 
*/
          --h5-font: var(--fw-900) var(--fs-h5)/var(--lh-130) var(--ff-header);
          --h5-ls: var(--ls-035);

          --h5-light-font: var(--fw-400) var(--fs-h5)/var(--lh-130) var(--ff-header);

/* 
    👉 Headline H6 
*/
          --h6-font: var(--fw-900) var(--fs-h6)/var(--lh-130) var(--ff-header);
          --h6-ls: var(--ls-035);

          --h6-light-font: var(--fw-400) var(--fs-h6)/var(--lh-130) var(--ff-header);

/* 
    👉 Headline H7 
*/
          --h7-font: var(--fw-900) var(--fs-h7)/var(--lh-135) var(--ff-header);
          --h7-ls: var(--ls-035);

          --h7-light-font: var(--fw-400) var(--fs-h7)/var(--lh-135) var(--ff-header);

/* 
    👉 Headline small-headline
*/
          --small-headline-font: var(--fw-700) var(--fs-small-headline)/var(--lh-130) var(--ff-header);
          --small-headline-ls: var(--ls-450);

          --small-headline-light-font: var(--fw-400) var(--fs-small-headline)/var(--lh-130) var(--ff-header);

/* =========================================================
  🧩 Paragraphs
========================================================= */ 
/* 
    👉 XXL - eXtra Large
*/
          /* regular */
          --p-xxl-regular-font: var(--fw-400) var(--fs-xxl)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-xxl-regular-ls: var(--ls-025);                                               /* letter spacing */

          /* bold */
          --p-xxl-bold-font: var(--fw-700) var(--fs-xxl)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-xxl-bold-ls: var(--ls-025);

          /* regular small line-height */
          --p-xxl-regular-slh-font: var(--fw-400) var(--fs-xxl)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-xxl-bold-slh-font: var(--fw-700) var(--fs-xxl)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

/* 
    👉 XL - eXtra Large
*/
          /* regular */
          --p-xl-regular-font: var(--fw-400) var(--fs-xl)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-xl-regular-ls: var(--ls-025);                                               /* letter spacing */

          /* bold */
          --p-xl-bold-font: var(--fw-700) var(--fs-xl)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-xl-bold-ls: var(--ls-025);

          /* regular small line-height */
          --p-xl-regular-slh-font: var(--fw-400) var(--fs-xl)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-xl-bold-slh-font: var(--fw-700) var(--fs-xl)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

/* 
    👉 L - Large
*/
          /* regular */
          --p-l-regular-font: var(--fw-400) var(--fs-l)/var(--lh-165) var(--ff-p);         /* formatowanie fonta */
          --p-l-regular-ls: var(--ls-025);                                               /* letter spacing */

          /* bold */
          --p-l-bold-font: var(--fw-700) var(--fs-l)/var(--lh-165) var(--ff-p);         /* formatowanie fonta */
          --p-l-bold-ls: var(--ls-025);

          /* regular small line-height */
          --p-l-regular-slh-font: var(--fw-400) var(--fs-l)/var(--lh-140) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-l-bold-slh-font: var(--fw-700) var(--fs-l)/var(--lh-140) var(--ff-p);         /* formatowanie fonta */

/* 
    👉 M - Medium
*/
          /* regular */
          --p-m-regular-font: var(--fw-400) var(--fs-m)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-m-regular-ls: var(--ls-025);                                               /* letter spacing */

          /* bold */
          --p-m-bold-font: var(--fw-700) var(--fs-m)/var(--lh-160) var(--ff-p);         /* formatowanie fonta */
          --p-m-bold-ls: var(--ls-025);

          /* regular small line-height */
          --p-m-regular-slh-font: var(--fw-400) var(--fs-m)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-m-bold-slh-font: var(--fw-700) var(--fs-m)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */


/* 
    👉 S - Small
*/
          /* regular */
          --p-s-regular-font: var(--fw-400) var(--fs-s)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-s-regular-ls: var(--ls-045);                                              /* letter spacing */

          /* bold */
          --p-s-bold-font: var(--fw-700) var(--fs-s)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-s-bold-ls: var(--ls-045);

          /* regular small line-height */
          --p-s-regular-slh-font: var(--fw-400) var(--fs-s)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-s-bold-slh-font: var(--fw-700) var(--fs-s)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */


/* 
    👉 XS - eXtra Small
*/

          /* regular */
          --p-xs-regular-font: var(--fw-400) var(--fs-xs)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-xs-regular-ls: var(--ls-005);                                              /* letter spacing */

          /* bold */
          --p-xs-bold-font: var(--fw-700) var(--fs-xs)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-xs-bold-ls: var(--ls-005);

          /* regular small line-height */
          --p-xs-regular-slh-font: var(--fw-400) var(--fs-xs)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-xs-bold-slh-font: var(--fw-700) var(--fs-xs)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

/* 
    👉 XXS - eXtra eXtra Small
*/
          /* regular */
          --p-xxs-regular-font: var(--fw-400) var(--fs-xxs)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-xxs-regular-ls: var(--ls-005);                                              /* letter spacing */

          /* bold */
          --p-xxs-bold-font: var(--fw-700) var(--fs-xxs)/var(--lh-150) var(--ff-p);         /* formatowanie fonta */
          --p-xxs-bold-ls: var(--ls-005);

          /* regular small line-height */
          --p-xxs-regular-slh-font: var(--fw-400) var(--fs-xxs)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */

          /* bold small line-height */
          --p-xxs-bold-slh-font: var(--fw-700) var(--fs-xxs)/var(--lh-120) var(--ff-p);         /* formatowanie fonta */






/* =========================================================
  🧩 Icon sizes
========================================================= */ 
      --icon-size-4: 4px;
      --icon-size-8: 8px;
      --icon-size-12: 12px;
      --icon-size-16: 16px;
      --icon-size-20: 20px;
      --icon-size-24: 24px;
      --icon-size-32: 32px;
      --icon-size-36: 36px;
      --icon-size-44: 44px;
      --icon-size-48: 48px;
      --icon-size-52: 52px;
      --icon-size-56: 56px;
      --icon-size-64: 64px;

/* =========================================================
  🧩 COLOR - TO REFINE
========================================================= */ 

      --bg:#F5F5F5;
      --accent:#ff6b3d;
      --accent-2:#ff2e63;
      --muted:#6b6b77;
      --card:#fff;
      --glass: rgba(10,10,20,0.85);
      --radius:32px;
      --container:1600px;
      --kv-desktop:1480px;
      --gradient-1-action: linear-gradient(90deg, #FF7A00 15%, #FF0169 100%);


      --effects-hover-upscale: 1.06;

/* =========================================================
  🧩 SHADOWS - TO REFINE
========================================================= */ 
      --box-shadow-light-back: 1px 1px 16px 16px rgba(0, 0, 0, 0.025); /* 1px 1px 25px 5px rgba(0, 0, 0, 0.08); /* box-shadow: 0 0 52px 0 rgba(0, 0, 0, 0.3);     ox-shadow: ; */
      --box-shadow-dark-back: 1px 1px 16px 16px rgba(0, 0, 0, 0.025); /*1px 1px 25px 5px rgba(0, 0, 0, 0.08); */

      --box-shadow-light-hover: 1px 1px 16px 16px rgba(0, 0, 0, 0.04); /* 1px 1px 25px 5px rgba(0, 0, 0, 0.16);  box-shadow: 0 0 52px 0 rgba(0, 0, 0, 0.3);     ox-shadow: ; */
      --box-shadow-dark-hover: 1px 1px 32px 32px rgba(0, 0, 0, 0.04); /*1px 1px 25px 5px rgba(0, 0, 0, 0.16); */
      --box-shadow-light-hover2: 0px 0px 32px 0px rgba(0, 0, 0, 0.16); /*1px 1px 32px 32px rgba(0, 0, 0, 0.04); 1px 1px 25px 5px rgba(0, 0, 0, 0.16); */

/* =========================================================
  🧩 COLOR - TO REMOVE
========================================================= */ 
      --basic-color-orange: #F56300;
      --basic-color-red: #E81155;
      --basic-color-blue:#174EFF;
      --basic-color-gray: #F5F5F5;
      --basic-color-gray2: rgba(52, 52, 52, 0.5);
      --basic-color-white: #FFFFFF;
      --basic-color-black: #080808;
      --basic-color-green: #2FBF71;
      --basic-color-blue2: #0088CC;
      --color-white-900: #F9F9FA;
      --color-gray-600: #f6f6f7;

      /* color presets */
      --body-background--light-mode: ;
      --body-background--dark-mode: var(--basic-color-gray);

      /* gradients */
      --gradient-cta: linear-gradient(90deg, #F56300 0%, #E81155 100%);

      --bg-special: linear-gradient(180deg, rgba(4, 142, 240, 0.10) 16.19%, rgba(232, 75, 218, 0.02) 85.00%) var(--basic-color-black);
      --bg-special2: linear-gradient(96deg, rgba(4, 142, 240, 0.24) 15.00%, rgba(232, 75, 218, 0.24) 95.00%);




















      /* border-radius-sizes */
      --br-4:4px;
      --br-8:8px;
      --br-16:16px;
      --br-20:20px;
      --br-24:24px;
      --br-32:32px;
      --br-48:48px;



@media (min-width: 1px) and (max-width: 640px) {
      --wrapper-padding: var(--space-16);

      /* section width wrapped */
      --width-wrap-1400:1400px;
      --width-wrap-1300:1300px;
      --width-wrap-1200:1200px;
      --width-wrap-1100:1100px;
      --width-wrap-1000:1000px;

}










@media (min-width: 1200px) {

      /* section width wrapped */
      --width-wrap-1400:1400px;
      --width-wrap-1300:1300px;
      --width-wrap-1200:1200px;
      --width-wrap-1100:1100px;
      --width-wrap-1000:1000px;


}






/* p xxl*/
.section .p-xxl-regular,
.modal .p-xxl-regular { font: var(--p-xxl-regular-font); letter-spacing: var(--p-xxl-regular-ls); } 
.section .p-xxl-regular-slh,
.modal .p-xxl-regular-slh { font: var(--p-xxl-regular-slh-font); letter-spacing: var(--p-xxl-regular-ls); }
.section .p-xxl-bold,
.modal .p-xxl-bold { font: var(--p-xxl-bold-font); letter-spacing: var(--p-xxl-bold-ls); } 
.section .p-xxl-bold-slh,
.modal .p-xxl-bold-slh { font: var(--p-xxl-bold-slh-font); letter-spacing: var(--p-xxl-bold-ls); }

/* p extra large */
.section .p-xl-regular,
.modal .p-xl-regular { font: var(--p-xl-regular-font); letter-spacing: var(--p-xl-regular-ls); } 
.section .p-xl-regular-slh,
.modal .p-xl-regular-slh { font: var(--p-xl-regular-slh-font); letter-spacing: var(--p-xl-regular-ls); }
.section .p-xl-bold,
.modal .p-xl-bold { font: var(--p-xl-bold-font); letter-spacing: var(--p-xl-bold-ls); } 
.section .p-xl-bold-slh,
.modal .p-xl-bold-slh { font: var(--p-xl-bold-slh-font); letter-spacing: var(--p-xl-bold-ls); }

/* p large */
.section .p-l-regular, 
.modal .p-l-regular { font: var(--p-l-regular-font); letter-spacing: var(--p-l-regular-ls); } 
.section .p-l-regular-slh,
.modal .p-l-regular-slh { font: var(--p-l-regular-slh-font); letter-spacing: var(--p-l-regular-ls); }
.section .p-l-bold,
.modal .p-l-bold { font: var(--p-l-bold-font); letter-spacing: var(--p-l-bold-ls); } 
.section .p-l-bold-slh,
.modal .p-l-bold-slh { font: var(--p-l-bold-slh-font); letter-spacing: var(--p-l-bold-ls); }

/* p medium */
.section .p-m-regular,
.modal .p-m-regular { font: var(--p-m-regular-font); letter-spacing: var(--p-m-regular-ls); } 
.section .p-m-regular-slh, 
.modal .p-m-regular-slh { font: var(--p-m-regular-slh-font); letter-spacing: var(--p-m-regular-ls); }
.section .p-m-bold,
.modal .p-m-bold { font: var(--p-m-bold-font); letter-spacing: var(--p-m-bold-ls); } 
.section .p-m-bold-slh,
.modal .p-m-bold-slh  { font: var(--p-m-bold-slh-font); letter-spacing: var(--p-m-bold-ls); }

/* p small */
.section .p-s-regular,
.modal .p-s-regular  { font: var(--p-s-regular-font); letter-spacing: var(--p-s-regular-ls); } 
.section .p-s-regular-slh,
.modal .p-m-regular-slh { font: var(--p-s-regular-slh-font); letter-spacing: var(--p-s-regular-ls); }
.section .p-s-bold,
.modal .p-m-bold  { font: var(--p-s-bold-font); letter-spacing: var(--p-s-bold-ls); } 
.section .p-s-bold-slh, 
.modal .p-m-bold-slh { font: var(--p-s-bold-slh-font); letter-spacing: var(--p-s-bold-ls); }

/* p extra small */
.section .p-xs-regular,
.modal .p-xs-regular  { font: var(--p-xs-regular-font); letter-spacing: var(--p-xs-regular-ls); } 
.section .p-xs-regular-slh,
.modal .p-xs-regular-slh { font: var(--p-xs-regular-slh-font); letter-spacing: var(--p-xs-regular-ls); }
.section .p-xs-bold,
.modal .p-xs-bold { font: var(--p-xs-bold-font); letter-spacing: var(--p-xs-bold-ls); } 
.section .p-xs-bold-slh,
.modal .p-xs-bold-slh { font: var(--p-xs-bold-slh-font); letter-spacing: var(--p-xs-bold-ls); }

/* headings */
.section .mh { font: var(--mh-font); letter-spacing: var(--mh-ls); width:100%; }
.section .h1, .modal .h1 { font: var(--h1-font); letter-spacing: var(--h1-ls); width:100%; }
.section .h2, .modal .h2 { font: var(--h2-font); letter-spacing: var(--h2-ls); width:100%; }
.section .h3, .modal .h3 { font: var(--h3-font); letter-spacing: var(--h3-ls); width:100%; }
.section .h4, .modal .h4 { font: var(--h4-font); letter-spacing: var(--h4-ls); width:100%; }
.section .h5, .modal .h5 { font: var(--h5-font); letter-spacing: var(--h5-ls); width:100%; }
.section .h5-light, .modal .h5-light { font: var(--h5-light-font); letter-spacing: var(--h5-ls); width:100%; }
.section .h6, .modal .h6 { font: var(--h6-font); letter-spacing: var(--h6-ls);  width:100%; }
.section .h6-light, .modal .h6-light { font: var(--h6-light-font); letter-spacing: var(--h6-ls); width:100%; }
.section .h7, .modal .h7 { font: var(--h7-font); letter-spacing: var(--h7-ls);  width:100%; }
.section .h7-light, .modal .h7-light { font: var(--h7-light-font); letter-spacing: var(--h7-ls); width:100%; }

.section .small-headline, .modal .small-headline { font: var(--small-headline-font); letter-spacing: var(--small-headline-ls);  width:100%; }

/* gaps */
.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); } 
.gap-24 { gap: var(--space-24); } 
.gap-32 { gap: var(--space-32); } 
.gap-48 { gap: var(--space-48); } 
.gap-64 { gap: var(--space-64); } 




/* L */



/* M 
.btn--m.btn--icon-only { width:var(--button-m-height) !important; height:var(--button-m-height); gap: var(--button-m-gap); }
.btn--m .btn--icon { width:var(--button-m-ico-width); height:var(--button-m-ico-width);  }
*/
/* S
.btn--s.btn--icon-only { width:var(--button-s-height) !important; height:var(--button-s-height); gap: var(--button-s-gap);  }
.btn--s .btn--icon { width:var(--button-s-ico-width); height:var(--button-s-ico-width); }
 */
/* XS 
.btn--xs.btn--icon-only { width:var(--button-xs-height) !important; height:var(--button-xs-height); gap: var(--button-xs-gap); }
.btn--xs .btn--icon { width:var(--button-xs-ico-width); height:var(--button-xs-ico-width); }


*/





/*
.btn--l.btn--with-icon { height:var(--button-l-height); gap: var(--button-l-gap); }
.btn--l .btn--icon { width:var(--button-l-ico-width); height:var(--button-l-ico-width);  }

/* M 
.btn--m.btn--with-icon{ height:var(--button-m-height); gap: var(--button-m-gap); }
.btn--m .btn--icon { width:var(--button-m-ico-width); height:var(--button-m-ico-width);  }
*/
/* S 
.btn--s.btn--with-icon { height:var(--button-s-height); gap: var(--button-s-gap);  }
.btn--s .btn--icon { width:var(--button-s-ico-width); height:var(--button-s-ico-width); }
*/
/* XS 
.btn--xs.btn--with-icon { height:var(--button-xs-height); gap: var(--button-xs-gap); }
.btn--xs .btn--icon { width:var(--button-xs-ico-width); height:var(--button-xs-ico-width); }



*/









/* buttons - text + icon 
.btn--with-icon { flex: 0 0 auto; }
*/








/* display */
.flex-column { display: flex; flex-direction: column; align-items: flex-start; }
.flex-row { display: flex; flex-direction: row; align-items: flex-start; }