@layer base {
  :root {
    --big: 500 1.2222rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
    --huge: 500 1.3333rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
    --giant: 500 1.2222rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
    --mighty: 300 1.7777rem / 1.4375 "Helvetica Neue", "Inter", sans-serif;
    --titanic: 500 2.6666rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
    --colossal: 300 5.3333rem / 1.2 "Helvetica Neue", "Inter", sans-serif;

    --common: 300 18px / 1.4444 "Helvetica Neue", "Inter", sans-serif;

    --small: 300 0.8888rem / 1.5 "Helvetica Neue", "Inter", sans-serif;
    --petite: 700 0.7777rem / 1.2857 "Helvetica Neue", "Inter", sans-serif;
    --compact: 400 0.7777rem / 1.2857 "Golos Text", "Inter", sans-serif;

    @media (max-width: 700px) {
      --big: 500 1.125rem / 1.333 "Helvetica Neue", "Inter", sans-serif;
      --huge: 500 1.25rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
      --giant: 500 1.125rem / 1.333 "Helvetica Neue", "Inter", sans-serif;
      --mighty: 300 1.375rem / 1.363 "Helvetica Neue", "Inter", sans-serif;
      --titanic: 400 2rem / 1.2 "Helvetica Neue", "Inter", sans-serif;
      --colossal: 300 3.5rem / 1.2 "Helvetica Neue", "Inter", sans-serif;

      --common: 300 16px / 1.5 "Helvetica Neue", "Inter", sans-serif;

      --petite: 700 0.75rem / 1.3 "Helvetica Neue", "Inter", sans-serif;
    }

    --numbers: var(--colossal);
    --h1: var(--titanic);
    --intro: var(--mighty);
    --h2: var(--giant);
    --h3: var(--huge);
    --h4: var(--big);

    --body: var(--common);
    --body-small: var(--small);
    --label: var(--petite);
  }
}