#Spacing

<div class="grid w-full gap-4 rounded-xl border border-border bg-card p-6">
  {[1, 2, 3, 4, 6, 8].map((step) => (
    <div class="flex items-center gap-4">
      <code class="w-16 text-xs text-muted-foreground">{step * 4}px</code>
      <span class="h-3 rounded-full bg-[var(--a3s-blue)]" style={`width:${step * 16}px`}></span>
      <span class="text-xs text-muted-foreground">space-{step}</span>
    </div>
  ))}
</div>