Margins & Padding
Define margins and padding using classes that scale with
parent sizes. The classes follow the pattern:
.u-<mg|pd>[-<top|bottom|left|right>]--<xxxlg|xxlg|xlg|lg|md|sm|xs|xxs>
.
So setting a margin on all sides of 1em would use .u-mg--md
and setting a margin of 1.5em only on top would use .u-mg-top--xlg
.