@import url("var.css");
.beneficios {
  width: 50vw;
  margin: 0 auto;
  padding: 30px 0;
}

.beneficios ul li {
  color: #fff;
}

.beneficios li::before {
  content: "• ";
  color: var(--cor-primaria);
  font-size: 1.5em;
  flex-shrink: 0; /* Evita que a bolinha diminua de tamanho */
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .beneficios {
    width: 60vw;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .beneficios {
    width: 70vw;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .beneficios {
    width: 80vw;
  }
}

@media (max-width: 480px) {
  .beneficios {
    width: 90vw;
  }
}