/* pessoas.css: quem faz e quem participa, como o perfil de um artista num aplicativo de música: o avatar redondo (as
   iniciais em branco sobre o cinza) 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: 52px; height: 52px; flex: none; border-radius: 50%;
  background: var(--superficie-apertada); font-size: 20px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

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

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

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

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

.pessoa__papel { font-size: 13px; font-weight: 500; 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 { font-weight: 700; color: var(--texto); }
.credito__funcao::after { content: ": "; }

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