@layer components {
  :root {
    --grid-cols: 12;
    --grid-gap: 1.5rem;
    --container-max: 1280px;
    --container-pad: 1rem;
  }

  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .row {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap);
    width: 100%;
  }

  /* Column spans using CSS custom property */
  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
  
  .col-1  { --span: 1; }
  .col-2  { --span: 2; }
  .col-3  { --span: 3; }
  .col-4  { --span: 4; }
  .col-5  { --span: 5; }
  .col-6  { --span: 6; }
  .col-7  { --span: 7; }
  .col-8  { --span: 8; }
  .col-9  { --span: 9; }
  .col-10 { --span: 10; }
  .col-11 { --span: 11; }
  .col-12 { --span: 12; }

  /* Offsets via grid-column-start */
  .offset-1  { grid-column-start: 2; }
  .offset-2  { grid-column-start: 3; }
  .offset-3  { grid-column-start: 4; }
  .offset-4  { grid-column-start: 5; }
  .offset-5  { grid-column-start: 6; }
  .offset-6  { grid-column-start: 7; }

  .col-end {
    grid-column-start: span var(--span, 1);
    grid-column-end: -1;
  }

  /* Responsive: stack on mobile */
  @media (max-width: 768px) {
    .row {
      --grid-cols: 4;
      --grid-gap: 1rem;
    }
    .col, [class*="col-"] {
      --span: 4;
    }
    [class*="offset-"] {
      grid-column-start: auto;
    }
  }
}