.avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.avatar__circle,
.avatar__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar__circle {
  background: var(--color-accent);
  color: var(--color-text);
  font-size: inherit;
  font-weight: 700;
}

.avatar__photo {
  object-fit: cover;
}

.avatar__crown {
  position: absolute;
  top: -35%;
  right: -30%;
  font-size: 0.7em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}