@layer components {
  .avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 700;
    overflow: hidden;
  }

  .avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
  .avatar--lg { width: 64px; height: 64px; font-size: var(--text-xl); }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
}