@each $dimension in left, right, top, bottom {
  :root {
          --u-margin-$(dimension)-halfx {
              margin-$(dimension): 0.5rem;
    }
  }
  .u-margin-$(dimension)-halfx {
      margin-$(dimension): 0.5rem !important;
  }
}

@each $dimension in left, right, top, bottom {
  @for $factor from 0 to 20 {
    :root {
        --u-margin-$(dimension)-$(factor)x {
              margin-$(dimension): $(factor)rem;
        }
      }
      .u-margin-$(dimension)-$(factor)x {
          margin-$(dimension): $(factor)rem !important;
      }
  }
}

:root {
  --u-margin-halfx {
      margin: 0.5rem;
  }
}

.u-margin-halfx {
    margin: 0.5rem !important;
}


@for $factor from 0 to 20 {
  :root {
      --u-margin-$(factor)x {
          margin: $(factor)rem;
      }
  }
  .u-margin-$(factor)x {
        margin: $(factor)rem !important;
  }
}