.values {
  position: relative;
  padding: 5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  z-index: 100;
  max-width: 1125px;
  margin: 0 auto;
}

.bubble {
  width: 140px;
  height: 140px;
  background: var(--blue-main);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.bubble.big {
  width: 180px;
  height: 180px;
  font-size: 1.4rem;
}


@media (max-width: 900px) {
    .values {
        display: grid;
        /* Creamos 2 columnas iguales */
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
        justify-items: center; /* Centra las burbujas horizontalmente */
        align-items: center;    /* Centra las burbujas verticalmente */
        
        /* Definimos el mapa del dado */
        grid-template-areas: 
            "b1 b2"
            "big big"
            "b3 b4";
    }

    /* Asignamos cada div a su lugar en el mapa */
    .b1 { grid-area: b1; }
    .b2 { grid-area: b2; }
    .b3 { grid-area: b3; }
    .b4 { grid-area: b4; }
    
    .big { 
        grid-area: big; 
        /* Si quieres que NO se estire y se vea centrada como el punto del dado: */
        justify-self: center; 
    }
}

/* Regla para pantallas grandes (Mayores a 900px) */
@media (min-width: 901px) {
    .values {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .b2,
    .b3 {
      transform: translateY(25%);
     }
    
    .b1,
    .b4 {
      transform: translateY(-25%);
     }
}