Add small (16px) variant to the avatars-inline component and align to design specs

What does this MR do?

• Adds a smaller (16px) size option for stacked (inline) avatars.
• Aligns avatars and stacked avatars to design specs:
  • Update border appearance
  • Add visual break between stacked avatars
  • Change badge font weight to regular
• Brings hovered/focused avatar to front

Screenshots

Before	After	Notes
		The avatar currently uses a transparent border, which makes the edge of the image transparent and that can feel blurry. The desired effect is that the transparent border be overlayed without impacting image transparency while also creating a crisp edge.
		Stacked avatars make use of a mask to create the overlap effect and separate each image.

Design spec	Output from MR changes

Focus and hover interaction

💡 Learnings

• There are many methods to mask elements (see the references below), in the end mask with radial-gradient was chosen because it didn't require a separate SVG dependency and has good browser support.
• Because mask-composite isn't supported in Edge, two different masks are used on to two different elements. If there was support for edge it could simplify the code even more.
• An alternative would be to use an SVG, but it's not clear where we'd supply that in the repo to reference it. It might not matter thought because clip-path has pretty much no support (except for Firefox) unless referencing an inline SVG.

Reference

• https://medium.com/ccoutzoukis/the-case-for-crescent-shaped-avatars-2f4ccd48d053
• https://ishadeed.com/article/thinking-about-the-cut-out-effect/

Integration merge requests

• GitLab: mr_url
• CustomersDot: mr_url
• Status Page: mr_url

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

• Code review guidelines.
• GitLab UI's contributing guidelines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
• Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.

Closes #2441 (closed)