/* ===== GRIDS 1.2.x → 1.3.x COMPAT ===== */

/* 1. Evita che le colonne “esplodano” fuori dal container */
.grids-area {
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* 2. Ripristina un gutter “globale” per le sezioni Grids
   (sia quelle generiche, sia quelle con la tua classe grids-s-w_i) */
.wp-block-grids-section .grids-areas-wrapper,
.grids-section .grids-areas-wrapper,
.grids-s-w_i .grids-areas-wrapper {
    column-gap: 32px;
    row-gap: 32px;
}

/* 3. Gutter un po’ più stretto su tablet/mobile */
@media (max-width: 1024px) {
    .wp-block-grids-section .grids-areas-wrapper,
    .grids-section .grids-areas-wrapper,
    .grids-s-w_i .grids-areas-wrapper {
        column-gap: 24px;
        row-gap: 24px;
    }
}

@media (max-width: 781px) {
    .wp-block-grids-section .grids-areas-wrapper,
    .grids-section .grids-areas-wrapper,
    .grids-s-w_i .grids-areas-wrapper {
        column-gap: 16px;
        row-gap: 16px;
    }
}

/* 4. Righe più “elastiche” (evita altezze tutte identiche quando non servono) */
.grids-areas-wrapper {
    grid-auto-rows: minmax(min-content, auto);
}

/* 5. Sicurezza extra contro scroll orizzontale indesiderato */
.grids-section,
.wp-block-grids-section,
.grids-s-w_i {

}