:root {
 --color-primary-25: 249, 252, 255;
 --color-primary-50: 241, 247, 254;
 --color-primary-100: 225, 237, 253;
 --color-primary-200: 189, 218, 250;
 --color-primary-300: 130, 188, 247;
 --color-primary-400: 64, 155, 240;
 --color-primary-500: 23, 126, 224;
 --color-primary-600: 10, 97, 191;
 --color-primary-700: 10, 80, 159;
 --color-primary-800: 12, 67, 128;
 --color-primary-900: 16, 57, 106;
 --color-primary-950: 12, 43, 80;
 --color-secondary-25: 255, 242, 241;
 --color-secondary-50: 255, 225, 223;
 --color-secondary-100: 255, 200, 197;
 --color-secondary-200: 255, 162, 157;
 --color-secondary-300: 255, 108, 101;
 --color-secondary-400: 255, 62, 52;
 --color-secondary-500: 231, 28, 18;
 --color-secondary-600: 199, 23, 14;
 --color-secondary-700: 165, 22, 15;
 --color-secondary-800: 136, 25, 20;
 --color-secondary-900: 74, 8, 5;
 --color-secondary-950: 35, 4, 2;
 --color-tertiary-25: 254, 247, 238;
 --color-tertiary-50: 254, 236, 214;
 --color-tertiary-100: 252, 214, 172;
 --color-tertiary-200: 249, 184, 120;
 --color-tertiary-300: 246, 144, 65;
 --color-tertiary-400: 243, 113, 28;
 --color-tertiary-500: 236, 90, 19;
 --color-tertiary-600: 189, 64, 17;
 --color-tertiary-700: 150, 52, 22;
 --color-tertiary-800: 121, 44, 21;
 --color-tertiary-900: 65, 20, 9;
 --color-tertiary-950: 39, 12, 5;
 --color-body-25: 250, 250, 250;
 --color-body-50: 245, 245, 245;
 --color-body-100: 230, 230, 230;
 --color-body-200: 211, 211, 211;
 --color-primary-300: 181, 181, 181;
 --color-body-400: 114, 114, 114;
 --color-body-500: 83, 83, 83;
 --color-body-600: 64, 64, 64;
 --color-body-700: 39, 39, 39;
 --color-body-800: 26, 26, 26;
 --color-body-900: 11, 11, 11;
 --color-body-950: 0, 0, 0;
 --font-family--display:'Montserrat', sans-serif;
 --font-family--body:'Source Sans 3', sans-serif;
 --typography-text-xs-font-size: 14px;
 --typography-text-xs-line-height: 18px;
 --typography-text-xs-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-text-xs-font-size: calc(14px * 1.2);
  }
  &[data-font-size='3']{
   --typography-text-xs-font-size: calc(14px * 1.4);
  }
  &[data-font-size='4']{
   --typography-text-xs-font-size: calc(14px * 1.6);
  }
  &[data-font-size='5']{
   --typography-text-xs-font-size: calc(14px * 1.8);
  }
  &[data-font-size='6']{
   --typography-text-xs-font-size: calc(14px * 2);
  }
  &[data-line-height='2']{
   --typography-text-xs-line-height: calc(18px * 1.2);
  }
  &[data-line-height='3']{
   --typography-text-xs-line-height: calc(18px * 1.4);
  }
  &[data-line-height='4']{
   --typography-text-xs-line-height: calc(18px * 1.6);
  }
  &[data-line-height='5']{
   --typography-text-xs-line-height: calc(18px * 1.8);
  }
  &[data-line-height='6']{
   --typography-text-xs-line-height: calc(18px * 2);
  }
 }

 --typography-text-sm-font-size: 16px;
 --typography-text-sm-line-height: 20px;
 --typography-text-sm-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-text-sm-font-size: calc(16px * 1.2);
  }
  &[data-font-size='3']{
   --typography-text-sm-font-size: calc(16px * 1.4);
  }
  &[data-font-size='4']{
   --typography-text-sm-font-size: calc(16px * 1.6);
  }
  &[data-font-size='5']{
   --typography-text-sm-font-size: calc(16px * 1.8);
  }
  &[data-font-size='6']{
   --typography-text-sm-font-size: calc(16px * 2);
  }
  &[data-line-height='2']{
   --typography-text-sm-line-height: calc(20px * 1.2);
  }
  &[data-line-height='3']{
   --typography-text-sm-line-height: calc(20px * 1.4);
  }
  &[data-line-height='4']{
   --typography-text-sm-line-height: calc(20px * 1.6);
  }
  &[data-line-height='5']{
   --typography-text-sm-line-height: calc(20px * 1.8);
  }
  &[data-line-height='6']{
   --typography-text-sm-line-height: calc(20px * 2);
  }
 }

 --typography-text-md-font-size: 18px;
 --typography-text-md-line-height: 22px;
 --typography-text-md-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-text-md-font-size: calc(18px * 1.2);
  }
  &[data-font-size='3']{
   --typography-text-md-font-size: calc(18px * 1.4);
  }
  &[data-font-size='4']{
   --typography-text-md-font-size: calc(18px * 1.6);
  }
  &[data-font-size='5']{
   --typography-text-md-font-size: calc(18px * 1.8);
  }
  &[data-font-size='6']{
   --typography-text-md-font-size: calc(18px * 2);
  }
  &[data-line-height='2']{
   --typography-text-md-line-height: calc(22px * 1.2);
  }
  &[data-line-height='3']{
   --typography-text-md-line-height: calc(22px * 1.4);
  }
  &[data-line-height='4']{
   --typography-text-md-line-height: calc(22px * 1.6);
  }
  &[data-line-height='5']{
   --typography-text-md-line-height: calc(22px * 1.8);
  }
  &[data-line-height='6']{
   --typography-text-md-line-height: calc(22px * 2);
  }
 }

 --typography-text-lg-font-size: 20px;
 --typography-text-lg-line-height: 24px;
 --typography-text-lg-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-text-lg-font-size: calc(20px * 1.2);
  }
  &[data-font-size='3']{
   --typography-text-lg-font-size: calc(20px * 1.4);
  }
  &[data-font-size='4']{
   --typography-text-lg-font-size: calc(20px * 1.6);
  }
  &[data-font-size='5']{
   --typography-text-lg-font-size: calc(20px * 1.8);
  }
  &[data-font-size='6']{
   --typography-text-lg-font-size: calc(20px * 2);
  }
  &[data-line-height='2']{
   --typography-text-lg-line-height: calc(24px * 1.2);
  }
  &[data-line-height='3']{
   --typography-text-lg-line-height: calc(24px * 1.4);
  }
  &[data-line-height='4']{
   --typography-text-lg-line-height: calc(24px * 1.6);
  }
  &[data-line-height='5']{
   --typography-text-lg-line-height: calc(24px * 1.8);
  }
  &[data-line-height='6']{
   --typography-text-lg-line-height: calc(24px * 2);
  }
 }

 --typography-text-xl-font-size: 24px;
 --typography-text-xl-line-height: 28px;
 --typography-text-xl-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-text-xl-font-size: calc(24px * 1.2);
  }
  &[data-font-size='3']{
   --typography-text-xl-font-size: calc(24px * 1.4);
  }
  &[data-font-size='4']{
   --typography-text-xl-font-size: calc(24px * 1.6);
  }
  &[data-font-size='5']{
   --typography-text-xl-font-size: calc(24px * 1.8);
  }
  &[data-font-size='6']{
   --typography-text-xl-font-size: calc(24px * 2);
  }
  &[data-line-height='2']{
   --typography-text-xl-line-height: calc(28px * 1.2);
  }
  &[data-line-height='3']{
   --typography-text-xl-line-height: calc(28px * 1.4);
  }
  &[data-line-height='4']{
   --typography-text-xl-line-height: calc(28px * 1.6);
  }
  &[data-line-height='5']{
   --typography-text-xl-line-height: calc(28px * 1.8);
  }
  &[data-line-height='6']{
   --typography-text-xl-line-height: calc(28px * 2);
  }
 }

 --typography-display-xs-font-size: 14px;
 --typography-display-xs-line-height: 18px;
 --typography-display-xs-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-display-xs-font-size: calc(14px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-xs-font-size: calc(14px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-xs-font-size: calc(14px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-xs-font-size: calc(14px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-xs-font-size: calc(14px * 2);
  }
  &[data-line-height='2']{
   --typography-display-xs-line-height: calc(18px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-xs-line-height: calc(18px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-xs-line-height: calc(18px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-xs-line-height: calc(18px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-xs-line-height: calc(18px * 2);
  }
 }

 --typography-display-sm-font-size: 16px;
 --typography-display-sm-line-height: 18px;
 --typography-display-sm-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-display-sm-font-size: calc(16px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-sm-font-size: calc(16px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-sm-font-size: calc(16px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-sm-font-size: calc(16px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-sm-font-size: calc(16px * 2);
  }
  &[data-line-height='2']{
   --typography-display-sm-line-height: calc(18px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-sm-line-height: calc(18px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-sm-line-height: calc(18px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-sm-line-height: calc(18px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-sm-line-height: calc(18px * 2);
  }
 }

 --typography-display-md-font-size: 18px;
 --typography-display-md-line-height: 22px;
 --typography-display-md-letter-spacing: 0px;
 body{
  &[data-font-size='2']{
   --typography-display-md-font-size: calc(18px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-md-font-size: calc(18px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-md-font-size: calc(18px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-md-font-size: calc(18px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-md-font-size: calc(18px * 2);
  }
  &[data-line-height='2']{
   --typography-display-md-line-height: calc(22px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-md-line-height: calc(22px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-md-line-height: calc(22px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-md-line-height: calc(22px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-md-line-height: calc(22px * 2);
  }
 }

 --typography-display-lg-font-size: 20px;
 --typography-display-lg-line-height: 24px;
 --typography-display-lg-letter-spacing: 0.2px;
 body{
  &[data-font-size='2']{
   --typography-display-lg-font-size: calc(20px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-lg-font-size: calc(20px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-lg-font-size: calc(20px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-lg-font-size: calc(20px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-lg-font-size: calc(20px * 2);
  }
  &[data-line-height='2']{
   --typography-display-lg-line-height: calc(24px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-lg-line-height: calc(24px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-lg-line-height: calc(24px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-lg-line-height: calc(24px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-lg-line-height: calc(24px * 2);
  }
 }

 --typography-display-xl-font-size: 28px;
 --typography-display-xl-line-height: 36px;
 --typography-display-xl-letter-spacing: 0.28px;
 body{
  &[data-font-size='2']{
   --typography-display-xl-font-size: calc(28px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-xl-font-size: calc(28px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-xl-font-size: calc(28px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-xl-font-size: calc(28px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-xl-font-size: calc(28px * 2);
  }
  &[data-line-height='2']{
   --typography-display-xl-line-height: calc(36px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-xl-line-height: calc(36px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-xl-line-height: calc(36px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-xl-line-height: calc(36px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-xl-line-height: calc(36px * 2);
  }
 }

 --typography-display-2xl-font-size: 40px;
 --typography-display-2xl-line-height: 44px;
 --typography-display-2xl-letter-spacing: 0.4px;
 body{
  &[data-font-size='2']{
   --typography-display-2xl-font-size: calc(40px * 1.2);
  }
  &[data-font-size='3']{
   --typography-display-2xl-font-size: calc(40px * 1.4);
  }
  &[data-font-size='4']{
   --typography-display-2xl-font-size: calc(40px * 1.6);
  }
  &[data-font-size='5']{
   --typography-display-2xl-font-size: calc(40px * 1.8);
  }
  &[data-font-size='6']{
   --typography-display-2xl-font-size: calc(40px * 2);
  }
  &[data-line-height='2']{
   --typography-display-2xl-line-height: calc(44px * 1.2);
  }
  &[data-line-height='3']{
   --typography-display-2xl-line-height: calc(44px * 1.4);
  }
  &[data-line-height='4']{
   --typography-display-2xl-line-height: calc(44px * 1.6);
  }
  &[data-line-height='5']{
   --typography-display-2xl-line-height: calc(44px * 1.8);
  }
  &[data-line-height='6']{
   --typography-display-2xl-line-height: calc(44px * 2);
  }
 }

 --shadow-xs: 0px 1px 2px 0px rgba(var(--color-body-900), 1);
 --shadow-sm: 0px 1px 2px 0px rgba(var(--color-body-900), 0.06), 0px 1px 3px -1px rgba(var(--color-body-900), 0.1);
 --shadow-md: 0px 2px 4px -2px rgba(var(--color-body-900), 0.06), 0px 4px 8px -2px rgba(var(--color-body-900), 0.1);
 --shadow-lg: 0px 4px 6px -2px rgba(var(--color-body-900), 0.03), 0px 12px 16px -4px rgba(var(--color-body-900), 0.08);
 --shadow-xl: 0px 8px 8px -4px rgba(var(--color-body-900), 0.03), 0px 20px 24px -4px rgba(var(--color-body-900), 0.08);
 --shadow-2xl: 0px 24px 48px -12px rgba(var(--color-body-900), 0.18);
 --shadow-3xl: 0px 32px 64px -12px rgba(var(--color-body-900), 0.14);
 --button-sm--primary-pt: var(--spacing-xl);
 --button-sm--primary-pr: var(--spacing-3xl);
 --button-sm--primary-pb: var(--spacing-xl);
 --button-sm--primary-pl: var(--spacing-3xl);
 --button-sm--primary-gap: var(--spacing-md);
 --button-sm--primary-border: 1px;
 --button-sm--primary-rounded: var(--radius-full);
 --button-sm--primary-font-family: var(--font-family--display);
 --button-sm--primary-font-weight: 600;
 --button-sm--primary-typography-fz: var(--typography-display-sm-font-size);
 --button-sm--primary-typography-lh: var(--typography-display-sm-line-height);
 --button-sm--primary-typography-ls: var(--typography-display-sm-letter-spacing);

 --button-md--primary-pt: var(--spacing-3xl);
 --button-md--primary-pr: var(--spacing-4xl);
 --button-md--primary-pb: var(--spacing-3xl);
 --button-md--primary-pl: var(--spacing-4xl);
 --button-md--primary-gap: var(--spacing-lg);
 --button-md--primary-border: 1px;
 --button-md--primary-rounded: var(--radius-full);
 --button-md--primary-font-family: var(--font-family--display);
 --button-md--primary-font-weight: 600;
 --button-md--primary-typography-fz: var(--typography-display-md-font-size);
 --button-md--primary-typography-lh: var(--typography-display-md-line-height);
 --button-md--primary-typography-ls: var(--typography-display-md-letter-spacing);

 --button-lg--primary-pt: var(--spacing-2xl);
 --button-lg--primary-pr: var(--spacing-4xl);
 --button-lg--primary-pb: var(--spacing-2xl);
 --button-lg--primary-pl: var(--spacing-4xl);
 --button-lg--primary-gap: var(--spacing-lg);
 --button-lg--primary-border: 1px;
 --button-lg--primary-rounded: var(--radius-full);
 --button-lg--primary-font-family: var(--font-family--display);
 --button-lg--primary-font-weight: 700;
 --button-lg--primary-typography-fz: var(--typography-display-sm-font-size);
 --button-lg--primary-typography-lh: var(--typography-display-sm-line-height);
 --button-lg--primary-typography-ls: var(--typography-display-sm-letter-spacing);

 --badge-sm--color-pt: var(--spacing-md);
 --badge-sm--color-pr: var(--spacing-lg);
 --badge-sm--color-pb: var(--spacing-md);
 --badge-sm--color-pl: var(--spacing-lg);
 --badge-sm--color-gap: var(--spacing-sm);
 --badge-sm--color-border: 1px;
 --badge-sm--color-rounded: var(--radius-full);
 --badge-sm--color-font-family: var(--font-family--body);
 --badge-sm--color-font-weight: 600;
 --badge-sm--color-typography-fz: var(--typography-text-xs-font-size);
 --badge-sm--color-typography-lh: var(--typography-text-xs-line-height);
 --badge-sm--color-typography-ls: var(--typography-text-xs-letter-spacing);

 --badge-md--color-pt: var(--spacing-md);
 --badge-md--color-pr: var(--spacing-lg);
 --badge-md--color-pb: var(--spacing-md);
 --badge-md--color-pl: var(--spacing-lg);
 --badge-md--color-gap: var(--spacing-sm);
 --badge-md--color-border: 1px;
 --badge-md--color-rounded: var(--radius-full);
 --badge-md--color-font-family: var(--font-family--body);
 --badge-md--color-font-weight: 700;
 --badge-md--color-typography-fz: var(--typography-text-sm-font-size);
 --badge-md--color-typography-lh: var(--typography-text-sm-line-height);
 --badge-md--color-typography-ls: var(--typography-text-sm-letter-spacing);

 --badge-lg--color-pt: var(--spacing-xl);
 --badge-lg--color-pr: var(--spacing-4xl);
 --badge-lg--color-pb: var(--spacing-xl);
 --badge-lg--color-pl: var(--spacing-4xl);
 --badge-lg--color-gap: var(--spacing-lg);
 --badge-lg--color-border: 1px;
 --badge-lg--color-rounded: var(--radius-full);
 --badge-lg--color-font-family: var(--font-family--display);
 --badge-lg--color-font-weight: 900;
 --badge-lg--color-typography-fz: var(--typography-display-xl-font-size);
 --badge-lg--color-typography-lh: var(--typography-display-xl-line-height);
 --badge-lg--color-typography-ls: var(--typography-display-xl-letter-spacing);

 --badge-lg--outline-pt: var(--spacing-xl);
 --badge-lg--outline-pr: var(--spacing-4xl);
 --badge-lg--outline-pb: var(--spacing-xl);
 --badge-lg--outline-pl: var(--spacing-4xl);
 --badge-lg--outline-gap: var(--spacing-lg);
 --badge-lg--outline-border: 0px;
 --badge-lg--outline-rounded: var(--radius-none);
 --badge-lg--outline-font-family: var(--font-family--display);
 --badge-lg--outline-font-weight: 900;
 --badge-lg--outline-typography-fz: var(--typography-display-xl-font-size);
 --badge-lg--outline-typography-lh: var(--typography-display-xl-line-height);
 --badge-lg--outline-typography-ls: var(--typography-display-xl-letter-spacing);

}
@media screen and (max-width: 1280px) and (min-width: 745px) {
 :root {
  --typography-text-xs-font-size: 13px;
  --typography-text-xs-line-height: 17px;
  --typography-text-xs-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-xs-font-size: calc(13px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-xs-font-size: calc(13px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-xs-font-size: calc(13px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-xs-font-size: calc(13px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-xs-font-size: calc(13px * 2);
   }
   &[data-line-height='2']{
    --typography-text-xs-line-height: calc(17px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-xs-line-height: calc(17px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-xs-line-height: calc(17px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-xs-line-height: calc(17px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-xs-line-height: calc(17px * 2);
   }
  }

  --typography-text-sm-font-size: 15px;
  --typography-text-sm-line-height: 19px;
  --typography-text-sm-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-sm-font-size: calc(15px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-sm-font-size: calc(15px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-sm-font-size: calc(15px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-sm-font-size: calc(15px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-sm-font-size: calc(15px * 2);
   }
   &[data-line-height='2']{
    --typography-text-sm-line-height: calc(19px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-sm-line-height: calc(19px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-sm-line-height: calc(19px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-sm-line-height: calc(19px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-sm-line-height: calc(19px * 2);
   }
  }

  --typography-text-md-font-size: 16px;
  --typography-text-md-line-height: 20px;
  --typography-text-md-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-md-font-size: calc(16px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-md-font-size: calc(16px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-md-font-size: calc(16px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-md-font-size: calc(16px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-md-font-size: calc(16px * 2);
   }
   &[data-line-height='2']{
    --typography-text-md-line-height: calc(20px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-md-line-height: calc(20px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-md-line-height: calc(20px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-md-line-height: calc(20px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-md-line-height: calc(20px * 2);
   }
  }

  --typography-text-lg-font-size: 18px;
  --typography-text-lg-line-height: 22px;
  --typography-text-lg-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-lg-font-size: calc(18px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-lg-font-size: calc(18px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-lg-font-size: calc(18px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-lg-font-size: calc(18px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-lg-font-size: calc(18px * 2);
   }
   &[data-line-height='2']{
    --typography-text-lg-line-height: calc(22px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-lg-line-height: calc(22px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-lg-line-height: calc(22px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-lg-line-height: calc(22px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-lg-line-height: calc(22px * 2);
   }
  }

  --typography-text-xl-font-size: 20px;
  --typography-text-xl-line-height: 24px;
  --typography-text-xl-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-xl-font-size: calc(20px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-xl-font-size: calc(20px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-xl-font-size: calc(20px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-xl-font-size: calc(20px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-xl-font-size: calc(20px * 2);
   }
   &[data-line-height='2']{
    --typography-text-xl-line-height: calc(24px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-xl-line-height: calc(24px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-xl-line-height: calc(24px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-xl-line-height: calc(24px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-xl-line-height: calc(24px * 2);
   }
  }

  --typography-display-xs-font-size: 13px;
  --typography-display-xs-line-height: 17px;
  --typography-display-xs-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-xs-font-size: calc(13px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-xs-font-size: calc(13px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-xs-font-size: calc(13px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-xs-font-size: calc(13px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-xs-font-size: calc(13px * 2);
   }
   &[data-line-height='2']{
    --typography-display-xs-line-height: calc(17px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-xs-line-height: calc(17px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-xs-line-height: calc(17px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-xs-line-height: calc(17px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-xs-line-height: calc(17px * 2);
   }
  }

  --typography-display-sm-font-size: 14px;
  --typography-display-sm-line-height: 18px;
  --typography-display-sm-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-sm-font-size: calc(14px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-sm-font-size: calc(14px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-sm-font-size: calc(14px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-sm-font-size: calc(14px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-sm-font-size: calc(14px * 2);
   }
   &[data-line-height='2']{
    --typography-display-sm-line-height: calc(18px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-sm-line-height: calc(18px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-sm-line-height: calc(18px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-sm-line-height: calc(18px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-sm-line-height: calc(18px * 2);
   }
  }

  --typography-display-md-font-size: 16px;
  --typography-display-md-line-height: 20px;
  --typography-display-md-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-md-font-size: calc(16px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-md-font-size: calc(16px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-md-font-size: calc(16px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-md-font-size: calc(16px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-md-font-size: calc(16px * 2);
   }
   &[data-line-height='2']{
    --typography-display-md-line-height: calc(20px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-md-line-height: calc(20px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-md-line-height: calc(20px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-md-line-height: calc(20px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-md-line-height: calc(20px * 2);
   }
  }

  --typography-display-lg-font-size: 18px;
  --typography-display-lg-line-height: 22px;
  --typography-display-lg-letter-spacing: 0.18px;
  body{
   &[data-font-size='2']{
    --typography-display-lg-font-size: calc(18px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-lg-font-size: calc(18px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-lg-font-size: calc(18px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-lg-font-size: calc(18px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-lg-font-size: calc(18px * 2);
   }
   &[data-line-height='2']{
    --typography-display-lg-line-height: calc(22px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-lg-line-height: calc(22px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-lg-line-height: calc(22px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-lg-line-height: calc(22px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-lg-line-height: calc(22px * 2);
   }
  }

  --typography-display-xl-font-size: 24px;
  --typography-display-xl-line-height: 28px;
  --typography-display-xl-letter-spacing: 0.24px;
  body{
   &[data-font-size='2']{
    --typography-display-xl-font-size: calc(24px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-xl-font-size: calc(24px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-xl-font-size: calc(24px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-xl-font-size: calc(24px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-xl-font-size: calc(24px * 2);
   }
   &[data-line-height='2']{
    --typography-display-xl-line-height: calc(28px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-xl-line-height: calc(28px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-xl-line-height: calc(28px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-xl-line-height: calc(28px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-xl-line-height: calc(28px * 2);
   }
  }

  --typography-display-2xl-font-size: 32px;
  --typography-display-2xl-line-height: 36px;
  --typography-display-2xl-letter-spacing: 0.32px;
  body{
   &[data-font-size='2']{
    --typography-display-2xl-font-size: calc(32px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-2xl-font-size: calc(32px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-2xl-font-size: calc(32px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-2xl-font-size: calc(32px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-2xl-font-size: calc(32px * 2);
   }
   &[data-line-height='2']{
    --typography-display-2xl-line-height: calc(36px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-2xl-line-height: calc(36px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-2xl-line-height: calc(36px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-2xl-line-height: calc(36px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-2xl-line-height: calc(36px * 2);
   }
  }

 }
}
@media screen and (max-width: 744px) {
 :root {
  --typography-text-xs-font-size: 13px;
  --typography-text-xs-line-height: 17px;
  --typography-text-xs-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-xs-font-size: calc(13px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-xs-font-size: calc(13px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-xs-font-size: calc(13px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-xs-font-size: calc(13px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-xs-font-size: calc(13px * 2);
   }
   &[data-line-height='2']{
    --typography-text-xs-line-height: calc(17px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-xs-line-height: calc(17px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-xs-line-height: calc(17px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-xs-line-height: calc(17px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-xs-line-height: calc(17px * 2);
   }
  }

  --typography-text-sm-font-size: 14px;
  --typography-text-sm-line-height: 18px;
  --typography-text-sm-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-sm-font-size: calc(14px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-sm-font-size: calc(14px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-sm-font-size: calc(14px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-sm-font-size: calc(14px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-sm-font-size: calc(14px * 2);
   }
   &[data-line-height='2']{
    --typography-text-sm-line-height: calc(18px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-sm-line-height: calc(18px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-sm-line-height: calc(18px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-sm-line-height: calc(18px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-sm-line-height: calc(18px * 2);
   }
  }

  --typography-text-md-font-size: 15px;
  --typography-text-md-line-height: 19px;
  --typography-text-md-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-md-font-size: calc(15px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-md-font-size: calc(15px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-md-font-size: calc(15px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-md-font-size: calc(15px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-md-font-size: calc(15px * 2);
   }
   &[data-line-height='2']{
    --typography-text-md-line-height: calc(19px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-md-line-height: calc(19px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-md-line-height: calc(19px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-md-line-height: calc(19px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-md-line-height: calc(19px * 2);
   }
  }

  --typography-text-lg-font-size: 16px;
  --typography-text-lg-line-height: 20px;
  --typography-text-lg-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-lg-font-size: calc(16px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-lg-font-size: calc(16px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-lg-font-size: calc(16px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-lg-font-size: calc(16px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-lg-font-size: calc(16px * 2);
   }
   &[data-line-height='2']{
    --typography-text-lg-line-height: calc(20px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-lg-line-height: calc(20px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-lg-line-height: calc(20px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-lg-line-height: calc(20px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-lg-line-height: calc(20px * 2);
   }
  }

  --typography-text-xl-font-size: 18px;
  --typography-text-xl-line-height: 22px;
  --typography-text-xl-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-text-xl-font-size: calc(18px * 1.2);
   }
   &[data-font-size='3']{
    --typography-text-xl-font-size: calc(18px * 1.4);
   }
   &[data-font-size='4']{
    --typography-text-xl-font-size: calc(18px * 1.6);
   }
   &[data-font-size='5']{
    --typography-text-xl-font-size: calc(18px * 1.8);
   }
   &[data-font-size='6']{
    --typography-text-xl-font-size: calc(18px * 2);
   }
   &[data-line-height='2']{
    --typography-text-xl-line-height: calc(22px * 1.2);
   }
   &[data-line-height='3']{
    --typography-text-xl-line-height: calc(22px * 1.4);
   }
   &[data-line-height='4']{
    --typography-text-xl-line-height: calc(22px * 1.6);
   }
   &[data-line-height='5']{
    --typography-text-xl-line-height: calc(22px * 1.8);
   }
   &[data-line-height='6']{
    --typography-text-xl-line-height: calc(22px * 2);
   }
  }

  --typography-display-xs-font-size: 12px;
  --typography-display-xs-line-height: 16px;
  --typography-display-xs-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-xs-font-size: calc(12px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-xs-font-size: calc(12px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-xs-font-size: calc(12px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-xs-font-size: calc(12px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-xs-font-size: calc(12px * 2);
   }
   &[data-line-height='2']{
    --typography-display-xs-line-height: calc(16px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-xs-line-height: calc(16px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-xs-line-height: calc(16px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-xs-line-height: calc(16px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-xs-line-height: calc(16px * 2);
   }
  }

  --typography-display-sm-font-size: 13px;
  --typography-display-sm-line-height: 17px;
  --typography-display-sm-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-sm-font-size: calc(13px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-sm-font-size: calc(13px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-sm-font-size: calc(13px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-sm-font-size: calc(13px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-sm-font-size: calc(13px * 2);
   }
   &[data-line-height='2']{
    --typography-display-sm-line-height: calc(17px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-sm-line-height: calc(17px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-sm-line-height: calc(17px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-sm-line-height: calc(17px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-sm-line-height: calc(17px * 2);
   }
  }

  --typography-display-md-font-size: 15px;
  --typography-display-md-line-height: 19px;
  --typography-display-md-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-md-font-size: calc(15px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-md-font-size: calc(15px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-md-font-size: calc(15px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-md-font-size: calc(15px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-md-font-size: calc(15px * 2);
   }
   &[data-line-height='2']{
    --typography-display-md-line-height: calc(19px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-md-line-height: calc(19px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-md-line-height: calc(19px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-md-line-height: calc(19px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-md-line-height: calc(19px * 2);
   }
  }

  --typography-display-lg-font-size: 16px;
  --typography-display-lg-line-height: 20px;
  --typography-display-lg-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-lg-font-size: calc(16px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-lg-font-size: calc(16px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-lg-font-size: calc(16px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-lg-font-size: calc(16px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-lg-font-size: calc(16px * 2);
   }
   &[data-line-height='2']{
    --typography-display-lg-line-height: calc(20px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-lg-line-height: calc(20px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-lg-line-height: calc(20px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-lg-line-height: calc(20px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-lg-line-height: calc(20px * 2);
   }
  }

  --typography-display-xl-font-size: 20px;
  --typography-display-xl-line-height: 24px;
  --typography-display-xl-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-xl-font-size: calc(20px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-xl-font-size: calc(20px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-xl-font-size: calc(20px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-xl-font-size: calc(20px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-xl-font-size: calc(20px * 2);
   }
   &[data-line-height='2']{
    --typography-display-xl-line-height: calc(24px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-xl-line-height: calc(24px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-xl-line-height: calc(24px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-xl-line-height: calc(24px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-xl-line-height: calc(24px * 2);
   }
  }

  --typography-display-2xl-font-size: 26px;
  --typography-display-2xl-line-height: 30px;
  --typography-display-2xl-letter-spacing: 0px;
  body{
   &[data-font-size='2']{
    --typography-display-2xl-font-size: calc(26px * 1.2);
   }
   &[data-font-size='3']{
    --typography-display-2xl-font-size: calc(26px * 1.4);
   }
   &[data-font-size='4']{
    --typography-display-2xl-font-size: calc(26px * 1.6);
   }
   &[data-font-size='5']{
    --typography-display-2xl-font-size: calc(26px * 1.8);
   }
   &[data-font-size='6']{
    --typography-display-2xl-font-size: calc(26px * 2);
   }
   &[data-line-height='2']{
    --typography-display-2xl-line-height: calc(30px * 1.2);
   }
   &[data-line-height='3']{
    --typography-display-2xl-line-height: calc(30px * 1.4);
   }
   &[data-line-height='4']{
    --typography-display-2xl-line-height: calc(30px * 1.6);
   }
   &[data-line-height='5']{
    --typography-display-2xl-line-height: calc(30px * 1.8);
   }
   &[data-line-height='6']{
    --typography-display-2xl-line-height: calc(30px * 2);
   }
  }

 }
}