/* The eyebrow: the small label that sits above a heading.
   ⭐ Built into the Heading component so it is one field instead of a second
   Heading with four settings. It renders on its own if the Text field is empty.
   ⭐ Sizes match the eyebrows already built by hand on About Us. */
.heading__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-block-end: .5rem;
  line-height: 1.4;
}