/* Avatar: someone's initials in a tinted circle */
.avatar {
  align-items: center;
  aspect-ratio: 1;
  background: color-mix(in oklch, var(--color-accent) 22%, var(--color-surface-2));
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  justify-content: center;
}