/* pessoas.css: quem faz e quem participa, como a ficha de um apresentador de TV: o quadradinho marinho com as iniciais
   em letra condensada e, ao lado, o nome, a função em azul caixa alta 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: var(--raio);
  border-bottom: var(--fio) solid var(--amarelo); background: var(--marinho); color: var(--branco);
  font-family: var(--letra-titulo); font-size: 22px; font-weight: 700; letter-spacing: .04em;
}

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

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

.pessoa__papel {
  font-family: var(--letra-titulo); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--azul);
}

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

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

.credito__funcao {
  font-family: var(--letra-titulo); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--marinho);
}
.credito__funcao::after { content: ": "; }

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