// Margins

.m0  { margin: 0; }
.mb0 { margin-bottom: 0; }

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

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

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

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


// Wrapper for horizontally centering elements with a fixed width
// Use .wrap in conjunction with the .measure classes to center columns
.wrap { margin-right: auto; margin-left: auto; }


// Responsive margins

.m-responsive { margin: 2rem; }
.mt-responsive { margin-top: 2rem; }
.mr-responsive { margin-right: 2rem; }
.mb-responsive { margin-bottom: 2rem; }
.ml-responsive { margin-left: 2rem; }

@media screen and (min-width: 48em) and (max-width: 64em) {
  .m-responsive { margin: 3rem; }
  .mt-responsive { margin-top: 3rem; }
  .mr-responsive { margin-right: 3rem; }
  .mb-responsive { margin-bottom: 3rem; }
  .ml-responsive { margin-left: 3rem; }
}

@media screen and (min-width: 64em) {
  .m-responsive { margin: 4rem; }
  .mt-responsive { margin-top: 4rem; }
  .mr-responsive { margin-right: 4rem; }
  .mb-responsive { margin-bottom: 4rem; }
  .ml-responsive { margin-left: 4rem; }
}

