.avatar {
  --avatar-size: 3.125rem;

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: var(--radius-pill);
  color: var(--color-neutral-0);
  font-family: var(--system-font);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
  text-align: center;
  letter-spacing: -7%;
}

.avatar--small {
  --avatar-size: 1.875rem;

  font-size: var(--font-size-xs);
}

.avatar--child {
  font-weight: var(--font-weight-light);
}

.avatar--child.avatar--small {
  font-weight: var(--font-weight-medium);
}

.avatar--blue {
  background: var(--color-blue-900);
}

.avatar--green {
  background: var(--color-green-900);
}

.avatar--yellow {
  background: var(--color-yellow-900);
}

.avatar--orange {
  background: var(--color-orange-900);
}

.avatar--red {
  background: var(--color-red-900);
}

.avatar--purple {
  background: var(--color-purple-900);
}

.avatar--peach {
  background: var(--color-peach-900);
}