@each $suffix, $size in $sizes {
  .m-mg-#{$suffix} {
    margin: $size;

    &-l {
      margin-left: $size;
    }

    &-r {
      margin-right: $size;
    }

    &-t {
      margin-top: $size;
    }

    &-b {
      margin-bottom: $size;
    }

    &-v {
      margin-top: $size;
      margin-bottom: $size;
    }

    &-h {
      margin-left: $size;
      margin-right: $size;
    }
  }

  @each $name, $value in $breakpoints {
    @if ($name != 'zero') {
      .m-mg-#{$suffix}--#{$name} {
        @include respond-to('zero', $name) {
          margin: $size;
        }
      }

      .m-mg-#{$suffix} {
        &-l-#{$name} {
          @include respond-to('zero', $name) {
            margin-left: $size;
          }
        }

        &-r-#{$name} {
          @include respond-to('zero', $name) {
            margin-right: $size;
          }
        }

        &-t-#{$name} {
          @include respond-to('zero', $name) {
            margin-top: $size;
          }
        }

        &-b-#{$name} {
          @include respond-to('zero', $name) {
            margin-bottom: $size;
          }
        }

        &-v-#{$name} {
          @include respond-to('zero', $name) {
            margin: $size 0;
          }
        }

        &-h-#{$name} {
          @include respond-to('zero', $name) {
            margin: 0 $size;
          }
        }
      }
    }
  }
}