/* SPACING UTILITY */

/* Margins */

.m-0     { margin: 0 }

.mb-auto { margin-bottom: auto            }
.mb-0    { margin-bottom: 0               }
.mb-4    { margin-bottom: var(--space-4)  }
.mb-8    { margin-bottom: var(--space-8)  }
.mb-12   { margin-bottom: var(--space-12) }
.mb-16   { margin-bottom: var(--space-16) }
.mb-24   { margin-bottom: var(--space-24) }
.mb-32   { margin-bottom: var(--space-32) }

.ml-auto { margin-left: auto            }
.ml-4    { margin-left: var(--space-4)  }
.ml-8    { margin-left: var(--space-8)  }
.ml-12   { margin-left: var(--space-12) }
.ml-16   { margin-left: var(--space-16) }
.ml-24   { margin-left: var(--space-24) }

.mr-auto { margin-right: auto            }
.mr-4    { margin-right: var(--space-4)  }
.mr-8    { margin-right: var(--space-8)  }
.mr-12   { margin-right: var(--space-12) }
.mr-16   { margin-right: var(--space-16) }
.mr-24   { margin-right: var(--space-24) }

.-mt-px  { margin-top: -1px            }
.mt-auto { margin-top: auto            }
.mt-0    { margin-top: 0               }
.mt-4    { margin-top: var(--space-4)  }
.mt-8    { margin-top: var(--space-8)  }
.mt-12   { margin-top: var(--space-12) }
.mt-16   { margin-top: var(--space-16) }
.mt-24   { margin-top: var(--space-24) }
.mt-32   { margin-top: var(--space-32) }

.mx-auto { margin-left: auto           ; margin-right: auto            }
.mx-px   { margin-left: 1px            ; margin-right: 1px             }
.mx-4    { margin-left: var(--space-4) ; margin-right: var(--space-4)  }
.mx-8    { margin-left: var(--space-8) ; margin-right: var(--space-8)  }
.mx-12   { margin-left: var(--space-12); margin-right: var(--space-12) }
.mx-16   { margin-left: var(--space-16); margin-right: var(--space-16) }
.mx-24   { margin-left: var(--space-24); margin-right: var(--space-24) }
.mx-32   { margin-left: var(--space-32); margin-right: var(--space-32) }

.my-4   { margin-top: var(--space-4) ; margin-bottom: var(--space-4)  } 
.my-8   { margin-top: var(--space-8) ; margin-bottom: var(--space-8)  }
.my-12  { margin-top: var(--space-12); margin-bottom: var(--space-12) }
.my-16  { margin-top: var(--space-16); margin-bottom: var(--space-16) }
.my-24  { margin-top: var(--space-24); margin-bottom: var(--space-24) }
.my-32  { margin-top: var(--space-32); margin-bottom: var(--space-32) }


/* Padding */

.pl-0 	{ padding-left: 0 }

.pt-4   { padding-top: var(--space-4)  } 
.pt-8   { padding-top: var(--space-8)  }
.pt-12  { padding-top: var(--space-12) }
.pt-16  { padding-top: var(--space-16) }
.pt-24  { padding-top: var(--space-24) }
.pt-32  { padding-top: var(--space-32) }
.pt-40  { padding-top: var(--space-40) }
.pt-48  { padding-top: var(--space-48) }

.pb-4   { padding-bottom: var(--space-4)  } 
.pb-8   { padding-bottom: var(--space-8)  }
.pb-12  { padding-bottom: var(--space-12) }
.pb-16  { padding-bottom: var(--space-16) }
.pb-24  { padding-bottom: var(--space-24) }
.pb-32  { padding-bottom: var(--space-32) }

.px-4   { padding-left: var(--space-4) ; padding-right: var(--space-4)  } 
.px-8   { padding-left: var(--space-8) ; padding-right: var(--space-8)  }
.px-12  { padding-left: var(--space-12); padding-right: var(--space-12) }
.px-16  { padding-left: var(--space-16); padding-right: var(--space-16) }
.px-24  { padding-left: var(--space-24); padding-right: var(--space-24) }
.px-32  { padding-left: var(--space-32); padding-right: var(--space-32) }

.py-4   { padding-top: var(--space-4) ; padding-bottom: var(--space-4)  } 
.py-8   { padding-top: var(--space-8) ; padding-bottom: var(--space-8)  }
.py-12  { padding-top: var(--space-12); padding-bottom: var(--space-12) }
.py-16  { padding-top: var(--space-16); padding-bottom: var(--space-16) }
.py-24  { padding-top: var(--space-24); padding-bottom: var(--space-24) }
.py-32  { padding-top: var(--space-32); padding-bottom: var(--space-32) }

.p-4   { padding: var(--space-4)  } 
.p-8   { padding: var(--space-8)  }
.p-12  { padding: var(--space-12) }
.p-16  { padding: var(--space-16) }
.p-24  { padding: var(--space-24) }
.p-32  { padding: var(--space-32) }
