/* ========================================================================== *\
   Utilities -> Margins ($utilities-margins)
\* ========================================================================== */

//
// m  = margin
// t  = top
// r  = right
// b  = bottom
// l  = left
// h  = horizontal
// v  = vertical
// -- = quarter
// -  = half
// +  = double
// ++ = quadruple
// 0  = none
//

// Whole
.m {
  .to-rem(margin, @spacing-base);
}

.mt {
  .to-rem(margin-top, @spacing-base);
}

.mr {
  .to-rem(margin-right, @spacing-base);
}

.mb {
  .to-rem(margin-bottom, @spacing-base);
}

.ml {
  .to-rem(margin-left, @spacing-base);
}

.mh {
  .to-rem(margin-right, @spacing-base);
  .to-rem(margin-left, @spacing-base);
}

.mv {
  .to-rem(margin-top, @spacing-base);
  .to-rem(margin-bottom, @spacing-base);
}

// Quarter (--)
.m-- {
  .to-rem(margin, @spacing-fourth);
}

.mt-- {
  .to-rem(margin-top, @spacing-fourth);
}

.mr-- {
  .to-rem(margin-right, @spacing-fourth);
}

.mb-- {
  .to-rem(margin-bottom, @spacing-fourth);
}

.ml-- {
  .to-rem(margin-left, @spacing-fourth);
}

.mh-- {
  .to-rem(margin-right, @spacing-fourth);
  .to-rem(margin-left, @spacing-fourth);
}

.mv-- {
  .to-rem(margin-top, @spacing-fourth);
  .to-rem(margin-bottom, @spacing-fourth);
}

// Half (-)
.m- {
  .to-rem(margin, @spacing-half);
}

.mt- {
  .to-rem(margin-top, @spacing-half);
}

.mr- {
  .to-rem(margin-right, @spacing-half);
}

.mb- {
  .to-rem(margin-bottom, @spacing-half);
}

.ml- {
  .to-rem(margin-left, @spacing-half);
}

.mh- {
  .to-rem(margin-right, @spacing-half);
  .to-rem(margin-left, @spacing-half);
}

.mv- {
  .to-rem(margin-top, @spacing-half);
  .to-rem(margin-bottom, @spacing-half);
}

// Double (+)
.m\+ {
  .to-rem(margin, @spacing-double);
}

.mt\+ {
  .to-rem(margin-top, @spacing-double);
}

.mr\+ {
  .to-rem(margin-right, @spacing-double);
}

.mb\+ {
  .to-rem(margin-bottom, @spacing-double);
}

.ml\+ {
  .to-rem(margin-left, @spacing-double);
}

.mh\+ {
  .to-rem(margin-right, @spacing-double);
  .to-rem(margin-left, @spacing-double);
}

.mv\+ {
  .to-rem(margin-top, @spacing-double);
  .to-rem(margin-bottom, @spacing-double);
}

// Quadruple (++)
.m\+\+ {
  .to-rem(margin, @spacing-quadruple);
}

.mt\+\+ {
  .to-rem(margin-top, @spacing-quadruple);
}

.mr\+\+ {
  .to-rem(margin-right, @spacing-quadruple);
}

.mb\+\+ {
  .to-rem(margin-bottom, @spacing-quadruple);
}

.ml\+\+ {
  .to-rem(margin-left, @spacing-quadruple);
}

.mh\+\+ {
  .to-rem(margin-right, @spacing-quadruple);
  .to-rem(margin-left, @spacing-quadruple);
}

.mv\+\+ {
  .to-rem(margin-top, @spacing-quadruple);
  .to-rem(margin-bottom, @spacing-quadruple);
}

// None (0)
.m0 {
  .to-rem(margin, @spacing-none);
}

.mt0 {
  .to-rem(margin-top, @spacing-none);
}

.mr0 {
  .to-rem(margin-right, @spacing-none);
}

.mb0 {
  .to-rem(margin-bottom, @spacing-none);
}

.ml0 {
  .to-rem(margin-left, @spacing-none);
}

.mh0 {
  .to-rem(margin-right, @spacing-none);
  .to-rem(margin-left, @spacing-none);
}

.mv0 {
  .to-rem(margin-top, @spacing-none);
  .to-rem(margin-bottom, @spacing-none);
}

.screens({
  // Whole
  .xs-m {
    .to-rem(margin, @spacing-base);
  }

  .xs-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .xs-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .xs-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .xs-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .xs-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .xs-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .xs-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .xs-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .xs-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .xs-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .xs-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .xs-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .xs-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .xs-m- {
    .to-rem(margin, @spacing-half);
  }

  .xs-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .xs-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .xs-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .xs-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .xs-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .xs-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .xs-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .xs-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .xs-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .xs-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .xs-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .xs-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .xs-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .xs-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .xs-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .xs-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .xs-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .xs-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xs-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xs-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .xs-m0 {
    .to-rem(margin, @spacing-none);
  }

  .xs-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .xs-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .xs-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .xs-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .xs-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .xs-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
},{
  // Whole
  .sm-m {
    .to-rem(margin, @spacing-base);
  }

  .sm-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .sm-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .sm-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .sm-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .sm-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .sm-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .sm-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .sm-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .sm-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .sm-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .sm-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .sm-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .sm-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .sm-m- {
    .to-rem(margin, @spacing-half);
  }

  .sm-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .sm-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .sm-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .sm-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .sm-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .sm-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .sm-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .sm-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .sm-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .sm-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .sm-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .sm-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .sm-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .sm-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .sm-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .sm-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .sm-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .sm-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .sm-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .sm-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .sm-m0 {
    .to-rem(margin, @spacing-none);
  }

  .sm-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .sm-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .sm-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .sm-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .sm-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .sm-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
},{
  // Whole
  .md-m {
    .to-rem(margin, @spacing-base);
  }

  .md-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .md-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .md-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .md-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .md-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .md-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .md-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .md-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .md-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .md-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .md-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .md-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .md-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .md-m- {
    .to-rem(margin, @spacing-half);
  }

  .md-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .md-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .md-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .md-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .md-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .md-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .md-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .md-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .md-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .md-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .md-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .md-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .md-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .md-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .md-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .md-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .md-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .md-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .md-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .md-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .md-m0 {
    .to-rem(margin, @spacing-none);
  }

  .md-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .md-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .md-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .md-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .md-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .md-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
},{
  // Whole
  .lg-m {
    .to-rem(margin, @spacing-base);
  }

  .lg-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .lg-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .lg-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .lg-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .lg-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .lg-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .lg-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .lg-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .lg-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .lg-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .lg-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .lg-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .lg-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .lg-m- {
    .to-rem(margin, @spacing-half);
  }

  .lg-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .lg-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .lg-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .lg-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .lg-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .lg-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .lg-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .lg-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .lg-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .lg-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .lg-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .lg-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .lg-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .lg-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .lg-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .lg-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .lg-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .lg-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .lg-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .lg-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .lg-m0 {
    .to-rem(margin, @spacing-none);
  }

  .lg-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .lg-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .lg-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .lg-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .lg-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .lg-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
},{
  // Whole
  .xl-m {
    .to-rem(margin, @spacing-base);
  }

  .xl-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .xl-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .xl-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .xl-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .xl-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .xl-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .xl-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .xl-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .xl-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .xl-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .xl-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .xl-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .xl-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .xl-m- {
    .to-rem(margin, @spacing-half);
  }

  .xl-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .xl-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .xl-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .xl-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .xl-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .xl-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .xl-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .xl-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .xl-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .xl-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .xl-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .xl-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .xl-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .xl-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .xl-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .xl-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .xl-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .xl-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xl-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xl-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .xl-m0 {
    .to-rem(margin, @spacing-none);
  }

  .xl-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .xl-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .xl-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .xl-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .xl-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .xl-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
},{
  // Whole
  .xxl-m {
    .to-rem(margin, @spacing-base);
  }

  .xxl-mt {
    .to-rem(margin-top, @spacing-base);
  }

  .xxl-mr {
    .to-rem(margin-right, @spacing-base);
  }

  .xxl-mb {
    .to-rem(margin-bottom, @spacing-base);
  }

  .xxl-ml {
    .to-rem(margin-left, @spacing-base);
  }

  .xxl-mh {
    .to-rem(margin-right, @spacing-base);
    .to-rem(margin-left, @spacing-base);
  }

  .xxl-mv {
    .to-rem(margin-top, @spacing-base);
    .to-rem(margin-bottom, @spacing-base);
  }

  // Quarter (--)
  .xxl-m-- {
    .to-rem(margin, @spacing-fourth);
  }

  .xxl-mt-- {
    .to-rem(margin-top, @spacing-fourth);
  }

  .xxl-mr-- {
    .to-rem(margin-right, @spacing-fourth);
  }

  .xxl-mb-- {
    .to-rem(margin-bottom, @spacing-fourth);
  }

  .xxl-ml-- {
    .to-rem(margin-left, @spacing-fourth);
  }

  .xxl-mh-- {
    .to-rem(margin-right, @spacing-fourth);
    .to-rem(margin-left, @spacing-fourth);
  }

  .xxl-mv-- {
    .to-rem(margin-top, @spacing-fourth);
    .to-rem(margin-bottom, @spacing-fourth);
  }

  // Half (-)
  .xxl-m- {
    .to-rem(margin, @spacing-half);
  }

  .xxl-mt- {
    .to-rem(margin-top, @spacing-half);
  }

  .xxl-mr- {
    .to-rem(margin-right, @spacing-half);
  }

  .xxl-mb- {
    .to-rem(margin-bottom, @spacing-half);
  }

  .xxl-ml- {
    .to-rem(margin-left, @spacing-half);
  }

  .xxl-mh- {
    .to-rem(margin-right, @spacing-half);
    .to-rem(margin-left, @spacing-half);
  }

  .xxl-mv- {
    .to-rem(margin-top, @spacing-half);
    .to-rem(margin-bottom, @spacing-half);
  }

  // Double (+)
  .xxl-m\+ {
    .to-rem(margin, @spacing-double);
  }

  .xxl-mt\+ {
    .to-rem(margin-top, @spacing-double);
  }

  .xxl-mr\+ {
    .to-rem(margin-right, @spacing-double);
  }

  .xxl-mb\+ {
    .to-rem(margin-bottom, @spacing-double);
  }

  .xxl-ml\+ {
    .to-rem(margin-left, @spacing-double);
  }

  .xxl-mh\+ {
    .to-rem(margin-right, @spacing-double);
    .to-rem(margin-left, @spacing-double);
  }

  .xxl-mv\+ {
    .to-rem(margin-top, @spacing-double);
    .to-rem(margin-bottom, @spacing-double);
  }

  // Quadruple (++)
  .xxl-m\+\+ {
    .to-rem(margin, @spacing-quadruple);
  }

  .xxl-mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
  }

  .xxl-mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
  }

  .xxl-mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  .xxl-ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xxl-mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple);
    .to-rem(margin-left, @spacing-quadruple);
  }

  .xxl-mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple);
    .to-rem(margin-bottom, @spacing-quadruple);
  }

  // None (0)
  .xxl-m0 {
    .to-rem(margin, @spacing-none);
  }

  .xxl-mt0 {
    .to-rem(margin-top, @spacing-none);
  }

  .xxl-mr0 {
    .to-rem(margin-right, @spacing-none);
  }

  .xxl-mb0 {
    .to-rem(margin-bottom, @spacing-none);
  }

  .xxl-ml0 {
    .to-rem(margin-left, @spacing-none);
  }

  .xxl-mh0 {
    .to-rem(margin-right, @spacing-none);
    .to-rem(margin-left, @spacing-none);
  }

  .xxl-mv0 {
    .to-rem(margin-top, @spacing-none);
    .to-rem(margin-bottom, @spacing-none);
  }
});