* { box-sizing: border-box; margin: 0; padding: 0; }

/* Base: 8px */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* 2x */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; } /* 1x */
.col { padding: 0 8px; flex: 1; } /* 1x */
[class*="col-"] { padding: 0 8px; } /* 1x */

/* Column sizes */
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }

/* Gap utilities (8px base) */
.gap-0 { margin: 0; } .gap-0 > [class*="col"] { padding: 0; margin-bottom: 0; }
.gap-1 { margin: 0 -4px; } .gap-1 > [class*="col"] { padding: 0 4px; margin-bottom: 8px; }   /* 0.5x, 1x */
.gap-2 { margin: 0 -8px; } .gap-2 > [class*="col"] { padding: 0 8px; margin-bottom: 16px; }  /* 1x, 2x */
.gap-3 { margin: 0 -12px; } .gap-3 > [class*="col"] { padding: 0 12px; margin-bottom: 24px; } /* 1.5x, 3x */
.gap-4 { margin: 0 -16px; } .gap-4 > [class*="col"] { padding: 0 16px; margin-bottom: 32px; } /* 2x, 4x */

/* Spacing utilities (8px base) */
.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }
.m-4 { margin: 32px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

/* Alignment */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Tablet: 2 columns for col-4 */
@media (min-width: 769px) and (max-width: 1024px) {
  .col-4 { flex: 0 0 50%; max-width: 50%; }
}