/* 12-column grid with 24px padding */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  width: 100%;
}

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

/* Grid column span utilities */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Grid column start utilities */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Responsive breakpoints */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .grid {
    gap: var(--space-4);
  }
  
  /* On mobile, most items span full width */
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    grid-column: span 12;
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) {
  .col-md-span-1 { grid-column: span 1; }
  .col-md-span-2 { grid-column: span 2; }
  .col-md-span-3 { grid-column: span 3; }
  .col-md-span-4 { grid-column: span 4; }
  .col-md-span-5 { grid-column: span 5; }
  .col-md-span-6 { grid-column: span 6; }
  .col-md-span-7 { grid-column: span 7; }
  .col-md-span-8 { grid-column: span 8; }
  .col-md-span-9 { grid-column: span 9; }
  .col-md-span-10 { grid-column: span 10; }
  .col-md-span-11 { grid-column: span 11; }
  .col-md-span-12 { grid-column: span 12; }
  
  .col-md-start-1 { grid-column-start: 1; }
  .col-md-start-2 { grid-column-start: 2; }
  .col-md-start-3 { grid-column-start: 3; }
  .col-md-start-4 { grid-column-start: 4; }
  .col-md-start-5 { grid-column-start: 5; }
  .col-md-start-6 { grid-column-start: 6; }
  .col-md-start-7 { grid-column-start: 7; }
  .col-md-start-8 { grid-column-start: 8; }
  .col-md-start-9 { grid-column-start: 9; }
  .col-md-start-10 { grid-column-start: 10; }
  .col-md-start-11 { grid-column-start: 11; }
  .col-md-start-12 { grid-column-start: 12; }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}