@media (--breakpoint-md) {

  .md-p0  { padding: 0 }

  .md-p1  { padding:       var(--space-1) }
  .md-py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
  .md-px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

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

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

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

}