/* Services page: hero background image and empty/error state. */

@layer pages {
  .hero--services {
    background-image: url("../../assets/images/hero/services-hero.svg");
  }

  .service-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--color-text-secondary);
  }

  .service-state[hidden] {
    display: none;
  }
}