/* ===== #servicos — nao vaza para fora de .bl-servicos ===== */
/* Deixou de ser quatro cartoes de largura igual e virou indice: quatro
   linhas, titulo a esquerda e o que ele significa a direita. O hover que
   levantava o cartao saiu junto — nada ali e clicavel, entao a afordancia
   era mentira. */
.bl-servicos__lista { list-style: none; margin: var(--bl-e5) 0 0; padding: 0; }
.bl-servicos__item { padding-block: var(--bl-e4); --bl-regua-y: var(--bl-e4); }
.bl-servicos__linha { display: grid; gap: var(--bl-e2); }
@media (min-width: 720px) {
  .bl-servicos__linha {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: var(--bl-e4); align-items: baseline;
  }
}
.bl-servicos__item h3 { margin: 0; max-width: 20ch; }
.bl-servicos__item p { font-size: .9375rem; color: var(--bl-texto-fraco); margin: 0; }
.bl-servicos__item .bl-servicos__exemplo {
  margin: var(--bl-e2) 0 0;
  font-family: var(--bl-fonte-mono); font-size: .75rem;
  color: var(--bl-ambar-700);   /* 4,80:1 no branco */
}

/* Linha e porte sao independentes — a nota e o que impede as quatro
   linhas de lerem como os dois projetos que as exemplificam. */
.bl-servicos__nota { color: var(--bl-texto-fraco); max-width: 52ch; }