:root {

  --type-h1-desktop: 80px;
  --type-h1-desktop-tablet: 80px;
  --type-h1-mobile: 36px;

  --type-h2-desktop: 36px;
  --type-h2-tablet: 32px;
  --type-h2-mobile: 32px;

  --type-h3-desktop: 30px;
  --type-h3-tablet: 28px;
  --type-h3-mobile: 22px;

  --type-body-xl-desktop: 18px;
  --type-body-xl-tablet: 16px;
  --type-body-xl-mobile: 16px;

  --type-button-xl-desktop: 16px;
  --type-button-xl-tablet: 16px;
  --type-button-xl-mobile: 16px;

  --type-body-s-desktop: 14px;
  --type-body-s-tablet: 14px;
  --type-body-s-mobile: 14px;

  --type-button-s-desktop: 13px;
  --type-button-s-tablet: 13px;
  --type-button-s-mobile: 13px;

  --type-body-xs-desktop: 12px;
  --type-body-xs-tablet: 12px;
  --type-body-xs-mobile: 12px;

  --type-h1-lh: 1;
  --type-h2-lh: 1;
  --type-h3-lh: 1.2;
  --type-body-xl-lh: 1.4;
  --type-button-xl-lh: 1.3;
  --type-body-s-lh: 1.3;
  --type-button-s-lh: 1.2;
  --type-body-xs-lh: 1.2;

  --type-h1: var(--type-h1-desktop);
  --type-h2: var(--type-h2-desktop);
  --type-h3: var(--type-h3-desktop);
  --type-body-xl: var(--type-body-xl-desktop);
  --type-button-xl: var(--type-button-xl-desktop);
  --type-body-s: var(--type-body-s-desktop);
  --type-button-s: var(--type-button-s-desktop);
  --type-body-xs: var(--type-body-xs-desktop);
}

@media (max-width: 1200px) {
  :root {
    --type-h1: var(--type-h1-desktop-tablet);
    --type-h2: var(--type-h2-tablet);
    --type-h3: var(--type-h3-tablet);
    --type-body-xl: var(--type-body-xl-tablet);
    --type-button-xl: var(--type-button-xl-tablet);
    --type-body-s: var(--type-body-s-tablet);
    --type-button-s: var(--type-button-s-tablet);
    --type-body-xs: var(--type-body-xs-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    --type-h1: var(--type-h1-mobile);
    --type-h2: var(--type-h2-mobile);
    --type-h3: var(--type-h3-mobile);
    --type-body-xl: var(--type-body-xl-mobile);
    --type-button-xl: var(--type-button-xl-mobile);
    --type-body-s: var(--type-body-s-mobile);
    --type-button-s: var(--type-button-s-mobile);
    --type-body-xs: var(--type-body-xs-mobile);
  }
}