$margin-levels: (
  '0': 0,
  '0\\.5': 0.125rem,
  '1': 0.25rem,
  '1\\.5': 0.375rem,
  '2': 0.5rem,
  '2\\.5': 0.625rem,
  '3': 0.75rem,
  '3\\.5': 0.875rem,
  '4': 1rem,
  '5': 1.25rem,
  '6': 1.5rem,
  '7': 1.75rem,
  '8': 2rem,
  '9': 2.25rem,
  '10': 2.5rem,
  '11': 2.75rem,
  '12': 3rem,
  '14': 3.5rem,
  '16': 4rem,
  '20': 5rem,
  '24': 6rem,
  '28': 7rem,
  '32': 8rem,
  '36': 9rem,
  '40': 10rem,
  '44': 11rem,
  '48': 12rem,
  '52': 13rem,
  '56': 14rem,
  '60': 15rem,
  '64': 16rem,
  '72': 18rem,
  '80': 20rem,
  '96': 24rem,
);

@each $level, $value in $margin-levels {
  .m-#{$level} {
    margin: $value;
  }
  .mt-#{$level} {
    margin-block-start: $value;
  }
  .mr-#{$level} {
    margin-inline-end: $value;
  }
  .mb-#{$level} {
    margin-block-end: $value;
  }
  .ml-#{$level} {
    margin-inline-start: $value;
  }
  .mx-#{$level} {
    margin-inline-start: $value;
    margin-inline-end: $value;
  }
  .my-#{$level} {
    margin-block-start: $value;
    margin-block-end: $value;
  }

  .\!m-#{$level} {
    margin: $value !important;
  }
  .\!mt-#{$level} {
    margin-block-start: $value !important;
  }
  .\!mr-#{$level} {
    margin-inline-end: $value !important;
  }
  .\!mb-#{$level} {
    margin-block-end: $value !important;
  }
  .\!ml-#{$level} {
    margin-inline-start: $value !important;
  }
  .\!mx-#{$level} {
    margin-inline-start: $value !important;
    margin-inline-end: $value !important;
  }
  .\!my-#{$level} {
    margin-block-start: $value !important;
    margin-block-end: $value !important;
  }
}

.m-auto {
  margin: auto;
}
.mx-auto {
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.my-auto {
  margin-block-start: auto;
  margin-block-end: auto;
}
.\!m-auto {
  margin: auto !important;
}
.\!mx-auto {
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}
.\!my-auto {
  margin-block-start: auto !important;
  margin-block-end: auto !important;
}