/* Global Markets page: hero background image, map figure, and empty/error state. */

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

  .markets-map-figure {
    background-color: var(--color-background-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    margin-block-end: var(--space-8);
  }

  .markets-map-figure img {
    max-width: 32rem;
    margin-inline: auto;
  }

  .markets-map-figure figcaption {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

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

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

  .markets-disclaimer {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    margin-block-start: var(--space-6);
    font-size: var(--font-size-sm);
  }
}