:is([class^='heading'], h1, h2, h3, h4, h5) {
  font-family: var(--font-secondary);
  font-feature-settings: "liga";
  font-variant-ligatures: normal;
}

p + p {
  margin-block-start: var(--step-0);
}

.heading-xxl, h2 {
  font-size: var(--step-5);
  line-height: 0.76;
  letter-spacing: -0.04em;
  font-weight: 300;
  text-wrap: balance;
}

.heading-l, h3 {
  font-size: var(--step-3);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.heading-m, h4 {
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.heading-s, h5 {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.body {
  font-size: var(--step-0);
  letter-spacing: 0;
}

.small {
  font-size: 0.9rem;
  letter-spacing: -0.04em;
}

.tiny {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.italic {
  font-family: var(--font-secondary);
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.intro {
  font-style: italic;
  color: var(--color-tertiary);
}