@layer components {
  .avatar {
    --avatar-border-radius: 50%;
    --avatar-size-default: 2.75rem;

    aspect-ratio: 1;
    block-size: var(--avatar-size, var(--avatar-size-default));
    inline-size: var(--avatar-size, var(--avatar-size-default));
    border-radius: var(--avatar-border-radius);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin: 0;

    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;

    :is(img, .icon) {
      aspect-ratio: 1;
      block-size: 100%;
      inline-size: 100%;
      max-inline-size: 100%;
      border-radius: var(--avatar-border-radius);
      grid-area: 1/1;
      object-fit: cover;
    }
  }
}