/* ============================

   GRID SYSTEM MODERNO (12 COL)

   ============================ */



/* Variabili configurabili */

:root {

  --container-width: 1100px;

  --gutter: 5px;

}



/* Container principale */

.container {

  max-width: var(--container-width);

  margin: 0 auto;

  padding: 0 var(--gutter);

}



/* Row */

.row {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: var(--gutter);

  margin-top: var(--gutter);

}



/* Colonne base */

[class^="col-"] {

  min-height: 1px;

}



/* Generazione classi col-1 ... col-12 */

.col-1  { grid-column: span 1; }

.col-2  { grid-column: span 2; }

.col-3  { grid-column: span 3; }

.col-4  { grid-column: span 4; }

.col-5  { grid-column: span 5; }

.col-6  { grid-column: span 6; }

.col-7  { grid-column: span 7; }

.col-8  { grid-column: span 8; }

.col-9  { grid-column: span 9; }

.col-10 { grid-column: span 10; }

.col-11 { grid-column: span 11; }

.col-12 { grid-column: span 12; }



/* ============================

   RESPONSIVE

   ============================ */



/* Tablet */

@media (max-width: 992px) {

  .col-md-1  { grid-column: span 1; }

  .col-md-2  { grid-column: span 2; }

  .col-md-3  { grid-column: span 3; }

  .col-md-4  { grid-column: span 4; }

  .col-md-5  { grid-column: span 5; }

  .col-md-6  { grid-column: span 6; }

  .col-md-7  { grid-column: span 7; }

  .col-md-8  { grid-column: span 8; }

  .col-md-9  { grid-column: span 9; }

  .col-md-10 { grid-column: span 10; }

  .col-md-11 { grid-column: span 11; }

  .col-md-12 { grid-column: span 12; }

}



/* Mobile */

@media (max-width: 576px) {

  [class^="col-"],

  [class^="col-md-"] {

    grid-column: span 12;

  }

}