@layer components {
  .avatar {
    --icon-size: var(--avatar-size);

    display: grid;
    place-items: center;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-participant);
    color: var(--color-participant-ink);
    font: var(--type-avatar);
  }

  .avatar--photo {
    overflow: hidden;
  }

  .avatar__photo {
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    object-fit: cover;
  }
}