@layer settings {
  :root {
    --mp-type-body: 400 18px/1.4 var(--mp-font-body);
    --mp-type-small: 400 16px/1.4 var(--mp-font-body);
    --mp-type-nav: 600 18px/1.5 var(--mp-font-display);
    --mp-type-h1: 700 54px/1 var(--mp-font-display);
    --mp-type-h2: 700 44px/1 var(--mp-font-display);
    --mp-type-h3: 700 36px/1.1 var(--mp-font-display);
    --mp-type-h4: 700 30px/1.1 var(--mp-font-display);
    --mp-type-h5: 700 24px/1.2 var(--mp-font-display);
    --mp-type-h6: 700 20px/1.2 var(--mp-font-display);
  }

  @media (max-width: 1024px) {
    :root { --mp-type-body: 400 17px/1.4 var(--mp-font-body); }
  }

  @media (max-width: 767px) {
    :root {
      --mp-type-body: 400 16px/1.4 var(--mp-font-body);
      --mp-type-h1: 700 38px/1 var(--mp-font-display);
      --mp-type-h2: 700 30px/1.05 var(--mp-font-display);
      --mp-type-h3: 700 28px/1.1 var(--mp-font-display);
    }
  }
}