/* === GRID FRAMEWORK 12 COLONNE RESPONSIVE === */

/* Container principale */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Colonne base */
[class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Helper per creare le larghezze */
:root {
  --col-1: 8.3333%;
  --col-2: 16.6666%;
  --col-3: 25%;
  --col-4: 33.3333%;
  --col-5: 41.6666%;
  --col-6: 50%;
  --col-7: 58.3333%;
  --col-8: 66.6666%;
  --col-9: 75%;
  --col-10: 83.3333%;
  --col-11: 91.6666%;
  --col-12: 100%;
}

/* === BASE (xs - <576px) === */
.col-xs-1  { width: var(--col-1); }
.col-xs-2  { width: var(--col-2); }
.col-xs-3  { width: var(--col-3); }
.col-xs-4  { width: var(--col-4); }
.col-xs-5  { width: var(--col-5); }
.col-xs-6  { width: var(--col-6); }
.col-xs-7  { width: var(--col-7); }
.col-xs-8  { width: var(--col-8); }
.col-xs-9  { width: var(--col-9); }
.col-xs-10 { width: var(--col-10); }
.col-xs-11 { width: var(--col-11); }
.col-xs-12 { width: var(--col-12); }

/* === SM (≥576px - smartphone landscape) === */
@media (min-width: 576px) {
  .col-sm-1  { width: var(--col-1); }
  .col-sm-2  { width: var(--col-2); }
  .col-sm-3  { width: var(--col-3); }
  .col-sm-4  { width: var(--col-4); }
  .col-sm-5  { width: var(--col-5); }
  .col-sm-6  { width: var(--col-6); }
  .col-sm-7  { width: var(--col-7); }
  .col-sm-8  { width: var(--col-8); }
  .col-sm-9  { width: var(--col-9); }
  .col-sm-10 { width: var(--col-10); }
  .col-sm-11 { width: var(--col-11); }
  .col-sm-12 { width: var(--col-12); }
}

/* === MD (≥768px - tablet portrait) === */
@media (min-width: 768px) {
  .col-md-1  { width: var(--col-1); }
  .col-md-2  { width: var(--col-2); }
  .col-md-3  { width: var(--col-3); }
  .col-md-4  { width: var(--col-4); }
  .col-md-5  { width: var(--col-5); }
  .col-md-6  { width: var(--col-6); }
  .col-md-7  { width: var(--col-7); }
  .col-md-8  { width: var(--col-8); }
  .col-md-9  { width: var(--col-9); }
  .col-md-10 { width: var(--col-10); }
  .col-md-11 { width: var(--col-11); }
  .col-md-12 { width: var(--col-12); }
}

/* === LG (≥1024px - tablet landscape) === */
@media (min-width: 1024px) {
  .col-lg-1  { width: var(--col-1); }
  .col-lg-2  { width: var(--col-2); }
  .col-lg-3  { width: var(--col-3); }
  .col-lg-4  { width: var(--col-4); }
  .col-lg-5  { width: var(--col-5); }
  .col-lg-6  { width: var(--col-6); }
  .col-lg-7  { width: var(--col-7); }
  .col-lg-8  { width: var(--col-8); }
  .col-lg-9  { width: var(--col-9); }
  .col-lg-10 { width: var(--col-10); }
  .col-lg-11 { width: var(--col-11); }
  .col-lg-12 { width: var(--col-12); }
}

/* === XL (≥1200px - desktop) === */
@media (min-width: 1200px) {
  .col-xl-1  { width: var(--col-1); }
  .col-xl-2  { width: var(--col-2); }
  .col-xl-3  { width: var(--col-3); }
  .col-xl-4  { width: var(--col-4); }
  .col-xl-5  { width: var(--col-5); }
  .col-xl-6  { width: var(--col-6); }
  .col-xl-7  { width: var(--col-7); }
  .col-xl-8  { width: var(--col-8); }
  .col-xl-9  { width: var(--col-9); }
  .col-xl-10 { width: var(--col-10); }
  .col-xl-11 { width: var(--col-11); }
  .col-xl-12 { width: var(--col-12); }
}