CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Usage */
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .col-4, .col-6, .col-8 { grid-column: span 12; }
}