:root {
  --container-max-width: 1200px;
  --grid-columns: 12;
  --grid-gap: 2rem;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* Column spans */
.col-5 {
  grid-column: span 5;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .col-5,
  .col-7 {
    grid-column: 1 / -1;
  }
  
  .grid {
    gap: 1.5rem;
  }
}