/* --- WRAPPER --- */
section.vg-meters{ width:100%; }

/* La tua row Bootstrap: la trasformo in "flex wrap" con spaziatura vera */
section.vg-meters .row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:22px;                 /* <-- evita sovrapposizioni */
  margin-left:0 !important; /* <-- evita offset bootstrap */
  margin-right:0 !important;
}

/* IMPORTANTISSIMO:
   col-md-2 in Bootstrap vale ~16.6% e a 980px diventa troppo stretto => cerchi si sovrappongono.
   Qui lo rendo "auto" con larghezza minima >= cerchio.
*/
section.vg-meters .col-md-2{
  flex:0 0 auto !important;
  width:190px !important;        /* >= cerchio */
  max-width:190px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  display:flex;
  justify-content:center;
}

/* --- METER --- */
.vg-meter{
  width:190px;
  text-align:center;
  font-family:Arial, sans-serif;
  --wave-color:#2196F3; /* fallback */
}

/* label/value */
.vg-meter__label{ font-weight:700; margin-bottom:6px; font-size:24px }
.vg-meter__value{ font-weight:700; margin-bottom:12px; font-size:36px }
section.vg-meters .vg-meter__value{
  color: var(--wave-color);
  font-weight: 700;
}
/* --- CERCHIO --- */
.vg-meter__circle{
  position:relative;
  width:150px;   /* cerchio */
  height:150px;
  margin:0 auto;
}
.vg-meter__circle svg{ width:100%; height:100%; display:block; }

.vg-ring{
  fill:none;
  stroke:rgba(0,0,0,.18);
  stroke-width:4;
}

/* Cerchio esterno dello stesso colore dell'onda */
section.vg-meters .vg-ring{
  stroke: var(--wave-color);
  stroke-width: 4;
  opacity: 0.45;        /* elegante, non troppo acceso */
}


/* onde colorate (JS setta --wave-color + fill inline per sicurezza) */
.vg-wave{ fill:var(--wave-color); }
.wave1{opacity:.90}
.wave2{opacity:.55}

/* ICONA: almeno 50% area cerchio -> per 150px = circa 75px */
.vg-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:78px !important;                 /* <-- GRANDE */
  line-height:1;
  color:rgba(0,0,0,.45);
  z-index:2;
}

/* --- RESPONSIVE --- */
@media (max-width: 1199px){
  /* 3 per riga circa, sempre centrati */
  section.vg-meters .col-md-2{ width:210px !important; max-width:210px !important; }
  .vg-meter{ width:210px; }
  .vg-meter__circle{ width:160px; height:160px; }
  .vg-icon{ font-size:86px; }
}

@media (max-width: 767px){
  /* 2 per riga */
  section.vg-meters .col-md-2{ width:50% !important; max-width:50% !important; }
  .vg-meter{ width:100%; }
  .vg-meter__circle{
    width:min(44vw, 190px);
    height:min(44vw, 190px);
  }
  .vg-icon{
    font-size:min(24vw, 104px); /* grande su mobile */
  }
}

@media (max-width: 360px){
  /* 1 per riga */
  section.vg-meters .col-md-2{ width:100% !important; max-width:100% !important; }
  .vg-meter__circle{ width:210px; height:210px; }
  .vg-icon{ font-size:112px; }
}