/* pessoas.css: quem faz e quem participa, como o cabeçalho de um canal: o avatar redondo (as iniciais em violeta claro
   sobre um roxo bem escuro) e, ao lado, o nome, o papel e a bio; embaixo, os créditos. Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

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

.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: 600; }

.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: ": "; }

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