@layer utility {
  .mx-e-none {
    margin-inline-end: 0;
  }
  .mx-e-xs {
    margin-inline-end: var(--margin-xs);
  }
  .mx-e-sm {
    margin-inline-end: var(--margin-sm);
  }
  .mx-e-md {
    margin-inline-end: var(--margin-md);
  }
  .mx-e-lg {
    margin-inline-end: var(--margin-lg);
  }
  .mx-e-xl {
    margin-inline-end: var(--margin-xl);
  }
  /* ------------------ */
  .mx-s-none {
    margin-inline-start: 0;
  }
  .mx-s-xs {
    margin-inline-start: var(--margin-xs);
  }
  .mx-s-sm {
    margin-inline-start: var(--margin-sm);
  }
  .mx-s-md {
    margin-inline-start: var(--margin-md);
  }
  .mx-s-lg {
    margin-inline-start: var(--margin-lg);
  }
  .mx-s-xl {
    margin-inline-start: var(--margin-xl);
  }
  /* --------------------- */
  .mx-none {
    margin-inline: 0;
  }
  .mx-xs {
    margin-inline: var(--margin-xs);
  }
  .mx-sm {
    margin-inline: var(--margin-sm);
  }
  .mx-md {
    margin-inline: var(--margin-md);
  }
  .mx-lg {
    margin-inline: var(--margin-lg);
  }
  .mx-xl {
    margin-inline: var(--margin-xl);
  }
}