CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

/* Fluid spacing with clamp */
.section { padding: clamp(3rem, 8vw, 8rem) 0; }
.container { padding: 0 clamp(1rem, 5vw, 2rem); }

/* Tailwind benzeri responsive */
.gap-responsive {
  gap: 1rem;
}
@media (min-width: 640px)  { .gap-responsive { gap: 1.5rem; } }
@media (min-width: 1024px) { .gap-responsive { gap: 2rem; } }