.special-border-left{
  border: 1px solid #D9E7F8;
  border-left: 4px solid var(--accent, var(--live-blue));
  border-radius: 16px;
  background: #fff;
  padding: 1.25rem;
}

.accent-live-blue{ --accent: var(--live-blue); }
.accent-green{ --accent: var(--green); }
.accent-purple{ --accent: var(--purple); }

/* variações de cor */
.accent-orange{ --accent: var(--orange); }
.accent-red{ --accent: var(--red); }

/* como você não tem --teal no :root, criei um fixo */
.accent-teal{ --accent: #0F9D8A; } /* ajuste se quiser mais “verde” */

/* Estruturei a parte que explica o que é precatório e os tipos de precatório. Estilizei essa parte(ícones, cor de fundo, peso de fonte, cor de fonte, negrito, paddings, cards). */
/* Estruturei a parte que mostra as origens comuns de precatórios, 3 colunas com cards. Criei uma classe para estilizar os cards com cor variável na parte esquerda e a borda arredondada */
/* Estruturei e estilizei a parte da linha do tempo de pagamento  (círculos, linhas verticais, peso de fonte, cores de texto, borda)*/

.circle{ width:38px; height:38px; }

.mini-circle{ width:24px; height:24px; }

@media(max-width: 992px){
  .circle {
    width: 30px;
    height: 30px;
  }
}

.step-line {
  margin-left: 1rem;      /* ms-3 */
  padding-left: .5rem;    /* ps-2 */
  margin-top: .5rem;      /* my-2 */
  margin-bottom: .5rem;   /* my-2 */
  border-left: 2px solid var(--light-blue);
  height: 26px;
}

#advantages, #role{
  font-size: 18px;
}

@media(max-width: 480px)
{
  #advantages, #role{
    font-size: 14px;
  }
}