/* passos.css: como funciona, no molde do "Três passos. Sem complicação." da OFBOX: três cartões brancos colados,
   separados por um fio, cada um com o número grande (com um risco mostarda embaixo), o nome do passo e uma frase.
   No telefone o número fica à esquerda do texto, pra os três caberem quase numa tela.
   Depende de: base.css e secoes-do-estudio.css. Telefone nas regras soltas, computador no @media do fim. */

.passos__lista { display: grid; gap: 1px; overflow: hidden; border-radius: var(--raio); background: var(--linha); }

.passo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 18px; padding: 20px; background: var(--branco); }

.passo__numero {
  grid-row: span 2; display: grid; gap: 6px; align-content: start;
  font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.passo__numero::after { content: ""; width: 24px; height: 4px; border-radius: 2px; background: var(--mostarda); }

.passo__nome { font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

.passo__texto { font-size: 14px; line-height: 1.55; color: var(--texto-suave); }

@media (min-width: 900px) {
  .passos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passo { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 40px 36px; }
  .passo__numero { grid-row: auto; gap: 12px; margin-bottom: 12px; font-size: 64px; }
  .passo__numero::after { width: 32px; }
  .passo__nome { font-size: 17px; }
  .passo__texto { font-size: 15px; }
}