// Margins
// -------------------------------------------------------------------
.m0  { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }

.m1  { margin: $space-1 }
.mt1 { margin-top: $space-1 }
.mr1 { margin-right: $space-1 }
.mb1 { margin-bottom: $space-1 }
.ml1 { margin-left: $space-1 }

.m2  { margin: $space-2 }
.mt2 { margin-top: $space-2 }
.mr2 { margin-right: $space-2 }
.mb2 { margin-bottom: $space-2 }
.ml2 { margin-left: $space-2 }

.m3  { margin: $space-3 }
.mt3 { margin-top: $space-3 }
.mr3 { margin-right: $space-3 }
.mb3 { margin-bottom: $space-3 }
.ml3 { margin-left: $space-3 }

.m4  { margin: $space-4 }
.mt4 { margin-top: $space-4 }
.mr4 { margin-right: $space-4 }
.mb4 { margin-bottom: $space-4 }
.ml4 { margin-left: $space-4 }

.mobile-m {
    @media screen and (max-width: $breakpoint--sm) {
        margin-top: $space-1;
        margin-bottom: $space-1;
    }
}

// Same bottom margin as body text
.p-mb  { margin-bottom: $p-mb; }

// Center something
.centered { margin-right: auto; margin-left: auto; }
