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