.fabric-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

/* ≥1200px: 4 per riga */
.fabric-grid > .fabric-item {
    grid-column: span 3;
}

/* ≥1200px: i primi 3 elementi occupano la prima riga */
.fabric-grid > .fabric-item:nth-child(-n+3) {
    grid-column: span 4;
}

/* <1200px: 2 per riga */
@media (max-width: 1199.98px) {
    .fabric-grid > .fabric-item,
    .fabric-grid > .fabric-item:nth-child(-n+3) {
        grid-column: span 6;
    }
}

/* <768px: 1 per riga */
@media (max-width: 767.98px) {
    .fabric-grid > .fabric-item,
    .fabric-grid > .fabric-item:nth-child(-n+3) {
        grid-column: span 12;
    }
}