@layer component.theme {
  .hero::before {
    background-color: light-dark(var(--bright), var(--dark));
  }

  .hero--light,
  .hero--dark {
    .hero__background {
      filter: opacity(.75);
    }
  }

  .hero--light {
    color-scheme: light;
  }

  .hero--dark {
    color-scheme: dark;
  }

  .hero__foreground {
    color: light-dark(var(--dark), var(--bright));
    display: flex;
    align-items: center;
  }
}