/* Avatar group of the design system (/design-system#avatar_group). The people list was the first screen to use it. */
.ds-avatar-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Each face ringed in the colour behind it (--ground, the page's paper unless a row says otherwise). */
.ds-avatar-group__face {
  border-radius: 50%;
  outline: 2px solid var(--ground, var(--ds-bg-pure));
}

/* A fifth of the face overlaps: at a third the next face cut the last letter of the initials. */
.ds-avatar-group > * + * { margin-inline-start: calc(var(--ds-avatar-group-size) * -0.2); }