/* Grid base + separación */
.grid_perfect_4_boxes {
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    box-sizing:border-box;
    --cols:2; /* 0–690px: 1 columna */
  }
  
/* 691–767px: 2 columnas */
@media (min-width:480px){ .grid_perfect_4_boxes{ --cols:2;gap:50px; } }

/* 768–999px: 3 columnas */
@media (min-width:768px){ .grid_perfect_4_boxes{ --cols:3; } }

/* 1000–1299px: 4 columnas */
@media (min-width:1000px){ .grid_perfect_4_boxes{ --cols:4; } }

/* ≥1300px: 5 columnas */
@media (min-width:1300px){ .grid_perfect_4_boxes{ --cols:5; } }
  
/* Ítems cuadrados perfectos que crecen proporcionalmente y se limitan a 600px */
.grid_perfect_4_boxes > div {
    flex: 0 1 calc((100% - (var(--cols) - 1) * 30px) / var(--cols));
    max-width:600px;          /* tope de crecimiento */
    aspect-ratio:1/1;         /* cuadrado perfecto */
    min-width:0;
}

@media (min-width:480px){
    .grid_perfect_4_boxes > div {
        flex: 0 1 calc((100% - (var(--cols) - 1) * 50px) / var(--cols));
    }
}