.avatar {
  --avatar-size: 4.4rem;
  --avatar-ring: transparent;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--accent-soft-strong);
  color: var(--accent-text);
  font-weight: 800;
  font-size: calc(var(--avatar-size) * .38);
  box-shadow: 0 0 0 .3rem var(--avatar-ring);
  overflow: hidden;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--xs { --avatar-size: 2rem; box-shadow: 0 0 0 .2rem var(--avatar-ring); }
.avatar--sm { --avatar-size: 3.2rem; }
.avatar--lg { --avatar-size: 6.4rem; }
.avatar--xl { --avatar-size: 9.6rem; }

.avatar-stack {
  display: inline-flex;
}

.avatar-stack .avatar {
  margin-left: -1rem;
  box-shadow: 0 0 0 .3rem var(--surface);
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}