<aside class="profile">
  <div class="avatar">
    <slot name="avatar"></slot>
  </div>
  <p class="name">
    <slot name="name"></slot>
  </p>
  <p class="species">
    <slot name="species"></slot>
  </p>
  <slot></slot>
</aside>

<style>
  .profile {
    --sidebar-position: static;
    --sidebar-padding: 1rem;
    --sidebar-grid-columns: auto 1fr;
    --sidebar-grid-areas: 'avatar name' 'avatar species' 'traits traits';
    --sidebar-top-text-align: start;
    --sidebar-avatar-size: 5em;

    position: var(--sidebar-position);
    top: var(--page-spacing);

    display: grid;
    grid-template-columns: var(--sidebar-grid-columns);
    grid-template-areas: var(--sidebar-grid-areas);
    gap: 0.75em;

    width: 100%;

    background-color: var(--clr-box-background);

    border: var(--border-thin) solid var(--clr-box-border);
    border-radius: var(--border-radius);
    padding-block: var(--sidebar-padding);
    padding-inline: var(--sidebar-padding);

    @media (min-width: 64em) {
      --sidebar-position: sticky;
      --sidebar-padding: 1.5rem;
      --sidebar-grid-columns: 1fr;
      --sidebar-grid-areas: 'avatar' 'name' 'species' 'traits';
      --sidebar-top-text-align: center;
      --sidebar-avatar-size: 10em;
    }

    & .avatar {
      grid-area: avatar;
      justify-self: center;

      & img {
        width: var(--sidebar-avatar-size);
        height: var(--sidebar-avatar-size);
        aspect-ratio: 1/1;
        border-radius: 1em;
        object-fit: cover;
      }
    }

    & .name,
    & .species {
      font-family: var(--font-family-headings);
      text-align: var(--sidebar-top-text-align);
    }

    & .name {
      grid-area: name;
      align-self: end;
      font-size: 1.375em;
      font-weight: bold;
      margin: 0;
    }

    & .species {
      grid-area: species;
      align-self: start;
      font-size: 0.75em;
      margin: 0;
    }

    & > :last-child {
      grid-area: traits;
      border-block-start: var(--border-thin) solid var(--clr-box-border);
      padding-block: 0.75em 0;
    }
  }
</style>
