The hero

We could have used a few of our utility classes on the hero section, such as the .text-center and .text-primary, to name a few.

And yes, you could totally use those, and then add the other styling through more specific classes.

The reason I didn't do that though, is because I need a fair amount of custom styling here already.

For example, we need a span around Mushroom Foraging, but it needs three declarations, and I don't particularly feel like one should be from a utility, and two from a class selector.

It's not that it doesn't work, and this is where personal preference definitely comes into play, but I like separating them.

@components {
  .hero {
    text-align: center;
    background-image: url(/assets/hero.webp);
    background-size: cover;
    font-size: var(--font-size-md);
    color: var(--text-high-contrast);
  }

  .hero__title {
    font-size: var(--font-size-heading-lg);

    > span {
      display: block;
      font-size: var(--font-size-heading-xl);
      color: var(--text-brand);
    }
  }
}