/* About page: hero background image and the credentials list styling. */

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

  .credentials-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .credentials-list li {
    padding: var(--space-4);
    background-color: var(--color-background-muted);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
  }

  .credentials-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-block-start: var(--space-3);
  }
}