@layer components {
  .avatar {
    --avatar-border-radius: 50%;

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

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

    .card & + .avatar {
      margin-inline-start: -0.8em;
    }
  }

  .avatar__form {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}