@layer components {
  /* Statistics: one donut per breakdown, side by side. */
  .charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
  }

  .chart {
    margin: 0;

    & figcaption { font-weight: 600; margin-bottom: 0.5rem; }
  }

  .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
  .avatar--large { width: 100%; max-width: 16rem; height: auto; border-radius: var(--radius); }
}