/* Avatar: the person's photo, or their first letter when there is no photo. Same name as the Figma component. */
.avatar {
  display: block;
  width: var(--size-avatar);
  height: var(--size-avatar);
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-round);
  object-fit: cover;
  background: var(--color-brand-blue-tint);
}

.avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue);
}