/* ==========================================================================
   Blocco GRUPPI DI IMMAGINI — responsive
   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui e una mia scelta
   di riflusso. Nessuna riga fuori da @media.

   A >= 1512 la sezione resta identica al mockup: contenuto 1192 (rientro di
   160 per lato), tre gruppi da 289 / 289 / 272, quattro immagini da 286 x 200
   per gruppo, filetto sotto i primi due.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso
   Il rientro di 160 per lato e una misura di Figma sulla pagina da 1512:
   sotto, il gutter di sezione basta e avanza. `max-width: 100%` sul container
   e gia dichiarato nel blocco, qui si toglie il padding verticale in eccesso
   solo piu in basso.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .gruppi > .container { width: 100%; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — le quattro immagini vanno su due righe
   A 1023 ogni immagine sarebbe larga ~230 e alta 200: il rapporto si
   capovolge e la foto diventa illeggibile. Due per riga, con il rapporto del
   mockup (286/200) al posto dell'altezza fissa.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .gruppi { padding-block: 96px; }              /* 160 -> 96, come le narrative */

  .gruppo__immagini { flex-wrap: wrap; }

  .gruppo__immagine {
    flex: 1 1 calc((100% - var(--grid-gap)) / 2);
    height: auto;
    aspect-ratio: 286 / 200;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — una immagine per riga
   Due per riga sarebbero larghe ~150: sotto la soglia in cui una foto di un
   sensore dice ancora qualcosa.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .gruppi { padding-block: 64px; }

  .gruppo__immagine {
    flex: 1 1 100%;
  }
}