/*
 * Faixa de números (etapa F2) -- os cinco indicadores da home, um uso só.
 *
 * **O fundo azul e o respiro em volta não estão aqui.** No `main.css` eles são de
 * `.home__numbers`, que é a seção -- e seção, no CMS, é o `SectionPlugin` da D2, que já leva
 * cor de fundo e os quatro espaçamentos por instância. O que fica é o arranjo dos itens e a
 * tipografia deles, transcritos de `main.css:586-634`.
 *
 * **O `gap` fica**, pela distinção que a E4 registrou: o envelope aqui é do próprio plugin.
 * Por que este contêiner existe onde a grade da E4 não existiu: ver o docstring do model.
 */

.numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 82px;
}

.numeros__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.numeros__numero {
  font-family: var(--seb-fonte-titulo);
  font-size: 62px;
  font-weight: 800;
  color: var(--seb-azul-claro);
}

/*
 * A margem negativa é do original, e não um erro de transcrição: ela puxa o rótulo para
 * debaixo do número, fechando o espaço que a caixa de linha do Manrope 62px deixa embaixo.
 * É medida interna do item, do mesmo tipo que a E3 manteve entre título e texto.
 */
.numeros__rotulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 400;
  color: var(--seb-branco);
  margin-top: -10px;
}

/* No celular a faixa empilha, e o `gap` cai para 32px -- é esta regra que faz o contêiner
 * valer um plugin. */
@media (max-width: 768px) {
  .numeros {
    flex-direction: column;
    gap: 32px;
  }

  .numeros__numero {
    font-size: 42px;
  }

  .numeros__rotulo {
    font-size: 18px;
  }
}