@layer base {
  :root {
    --big: 400 1.2222rem / 1.2 "Golos Text", sans-serif;
    --huge: 400 1.3333rem / 1.2 "Golos Text", sans-serif;
    --giant: 700 1.2222rem / 1.2 "Golos Text", sans-serif;
    --mighty: 400 1.7777rem / 1.4375 "Golos Text", sans-serif;
    --titanic: 400 2.6666rem / 1.2 "Golos Text", sans-serif;
    --colossal: 400 5.3333rem / 1.2 "Golos Text", sans-serif;

    --common: 400 18px / 1.4444 "Golos Text", sans-serif;

    --small: 400 0.8888rem / 1.5 "Golos Text", sans-serif;
    --petite: 400 0.7777rem / 1.2857 "Golos Text", sans-serif;

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

      --common: 400 16px / 1.5 "Golos Text", sans-serif;

      --petite: 400 0.75rem / 1.3 "Golos Text", 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);
  }

  h1,
  .h1 {
    font: var(--h1);
  }

  h2,
  .h2 {
    font: var(--h2);
    text-transform: uppercase;
  }

  h3,
  .h3 {
    font: var(--h3);
  }

  h4,
  .h4 {
    font: var(--h4);
  }

  h5,
  .h5,
  h6,
  .h6 {
    font: var(--common);
  }

  .custom-text-larger {
    font: var(--intro);
  }

  .custom-text-mighty {
    font: var(--mighty);
  }

  .custom-text-petite {
    font: var(--petite);
  }

  .custom-text-small {
    font: var(--small);
  }

  .suffix {
    font: var(--petite);
  }
}