perling/public/assets/sass/utilities/_spacing.scss

//margin css
@each $property, $value in $spaces {
  .m-#{$property} {
    margin: var(--size-#{$property});
  }
}

@each $property, $value in $spaces {
  .mx-#{$property} {
    margin-inline: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .my-#{$property} {
    margin-block: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .ms-#{$property} {
    margin-inline-start: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .me-#{$property} {
    margin-inline-end: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .mt-#{$property} {
    margin-block-start: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .mb-#{$property} {
    margin-block-end: var(--size-#{$property}) !important;
  }
}


// padding css 
@each $property, $value in $spaces {
  .p-#{$property} {
    padding: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .px-#{$property} {
    padding-inline: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .py-#{$property} {
    padding-block: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .ps-#{$property} {
    padding-inline-start: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .pe-#{$property} {
    padding-inline-end: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .pt-#{$property} {
    padding-block-start: var(--size-#{$property}) !important;
  }
}

@each $property, $value in $spaces {
  .pb-#{$property} {
    padding-block-end: var(--size-#{$property}) !important;
  }
}

.pe-0 {
  padding-right: 0!important;
}

.ms--10px {
    margin-left: -10px;
}

.mt--50 {
  margin-top: -50px;
}

.mt--100 {
  margin-top: -100px;
}

.w-30 {
  width: 30%;
}

.w-70 {
  width: 70%;
}


/* Gap Css */
@each $property, $value in $spaces {
  .gap-#{$property} {
    gap: var(--size-#{$property});
  }
}