/* pessoas.css: quem faz e quem participa, no jeito de canal: o avatar redondo e preto com as iniciais e, ao lado, o
   nome, o papel e a bio; embaixo, os créditos. No telefone o desenho é o que o dono montou: o nome e o papel na mesma
   linha do avatar e a bio embaixo, na largura toda (ver o @media do telefone).
   Depende de: base.css. Regras soltas pros dois, o telefone e o computador nos dois @media do fim. */

.avatar {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--preto); color: var(--branco); font-size: 17px; font-weight: 800;
}

.pessoas { display: grid; gap: 16px; }

.pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }

.pessoa__texto { display: grid; gap: 2px; }

.pessoa__nome { font-size: 16px; font-weight: 800; }

.pessoa__papel { font-size: 13px; color: var(--texto-suave); }

.pessoa__bio { margin-top: 6px; font-size: 14px; color: var(--texto-suave); }

.creditos {
  display: grid; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--texto-suave);
}

.credito__funcao::after { content: ": "; }

/* No telefone, do jeito que o dono montou em 16/10: o avatar, o nome e o papel numa linha só, e a bio embaixo, na
   largura toda, começando na mesma beira do avatar. O .pessoa__texto some como caixa pra os três textos virarem peças
   da grade da pessoa. */
@media (max-width: 899.98px) {
  .pessoa {
    grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "avatar nome papel" "bio bio bio";
    gap: 10px 12px; align-items: center;
  }
  .pessoa > .avatar { grid-area: avatar; }
  .pessoa__texto { display: contents; }
  .pessoa__nome { grid-area: nome; }
  .pessoa__papel { grid-area: papel; }
  .pessoa__bio { grid-area: bio; margin-top: 0; }
}

@media (min-width: 900px) {
  .avatar { width: 56px; height: 56px; font-size: 19px; }
}