.avatar-group {
  --gap: 0.4rem;
  --size: 6.4rem;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.avatar-group .avatar {
  align-self: flex-start;
  block-size: var(--size);
  line-height: var(--size);
  margin: 0;
  inline-size: var(--size);
}

.avatar-group--x-small .avatar {
  --size: 2.4rem;
}

.avatar {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
}