:root {
  --section-30-bg-color: #492ee0;
  --section-30-nb-color: #e9b525;
  --section-30-txt-color: white;
}

.section-30 {
  align-items: center;
  background-color: whitesmoke;
  color: #333;
  justify-content: center;
  font-weight: 300;
  padding-bottom: 10vh;
  padding-top: 10vh;
}

@media (min-width: 600px) {
  
  .section-30 ul {
    flex-wrap: wrap;
    display: flex;
    gap: 3rem;
  }
}

.section-30 ul {
  padding: 0;
  font-size: calc(var(--overall-size) * 1.2);
  list-style-type: none;
  justify-content: center;
}

.section-30 li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-30 .number {
  color: var(--section-30-nb-color);
  font-weight: 700;
}

/* ANIMATION DE CHIFFRE */
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.number {
  animation: counter 3s forwards;         /* Nombre de secondes */
  counter-reset: num var(--num);
}

@keyframes counter {
  0% {
    --num: 0;                             /* Start value */
  }
  100% {
    --num: 0;                             /* End value */
  }
}