    {% highlight 'css' %}
    .p1  { padding:       var(--space-1) }
    .py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
    .px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

    .p2  { padding:       var(--space-2) }
    .py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
    .px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

    .p3  { padding:       var(--space-3) }
    .py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
    .px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

    .p4  { padding:       var(--space-4) }
    .py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
    .px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }
    {% endhighlight %}