/* ALL SIDES */
.m-space-0 { margin: 0; }
.m-space-3xs { margin: var(--space-3xs); }
.m-space-2xs { margin: var(--space-2xs); }
.m-space-xs { margin: var(--space-xs); }
.m-space-s { margin: var(--space-s); }
.m-space-m { margin: var(--space-m); }
.m-space-l { margin: var(--space-l); }
.m-space-xl { margin: var(--space-xl); }
.m-space-2xl { margin: var(--space-2xl); }
.m-space-3xl { margin: var(--space-3xl); }

/* TOP AND BOTTOM */
.mt-space-3xs{margin-top:var(--space-3xs)}
.mb-space-3xs{margin-bottom:var(--space-3xs)}

.mt-space-2xs{margin-top:var(--space-2xs)}
.mb-space-2xs{margin-bottom:var(--space-2xs)}

.mt-space-xs{margin-top:var(--space-xs)}
.mb-space-xs{margin-bottom:var(--space-xs)}

.mt-space-s{margin-top:var(--space-s)}
.mb-space-s{margin-bottom:var(--space-s)}

.mt-space-m{margin-top:var(--space-m)}
.mb-space-m{margin-bottom:var(--space-m)}

.mt-space-l{margin-top:var(--space-l)}
.mb-space-l{margin-bottom:var(--space-l)}

.mt-space-xl{margin-top:var(--space-xl)}
.mb-space-xl{margin-bottom:var(--space-xl)}

.mt-space-2xl{margin-top:var(--space-2xl)}
.mb-space-2xl{margin-bottom:var(--space-2xl)}

.mt-space-3xl{margin-top:var(--space-3xl)}
.mb-space-3xl{margin-bottom:var(--space-3xl)}

/* LEFT AND RIGHT */
.ml-space-3xs { margin-left: var(--space-3xs); }
.mr-space-3xs { margin-right: var(--space-3xs); }

.ml-space-2xs { margin-left: var(--space-2xs); }
.mr-space-2xs { margin-right: var(--space-2xs); }

.ml-space-xs { margin-left: var(--space-xs); }
.mr-space-xs { margin-right: var(--space-xs); }

.ml-space-s { margin-left: var(--space-s); }
.mr-space-s { margin-right: var(--space-s); }

.ml-space-m { margin-left: var(--space-m); }
.mr-space-m { margin-right: var(--space-m); }

.ml-space-l { margin-left: var(--space-l); }
.mr-space-l { margin-right: var(--space-l); }

.ml-space-xl { margin-left: var(--space-xl); }
.mr-space-xl { margin-right: var(--space-xl); }

.ml-space-2xl { margin-left: var(--space-2xl); }
.mr-space-2xl { margin-right: var(--space-2xl); }

.ml-space-3xl { margin-left: var(--space-3xl); }
.mr-space-3xl { margin-right: var(--space-3xl); }

/* COMBINED */
.mx-space-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); }
.my-space-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }

.mx-space-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.my-space-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }

.mx-space-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.my-space-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }

.mx-space-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.my-space-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }

.mx-space-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.my-space-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }

.mx-space-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.my-space-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }

.mx-space-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.my-space-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

.mx-space-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.my-space-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }

.mx-space-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
.my-space-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }

/* ZERO MARGIN */
.mt-space-0 { margin-top: 0; }
.mb-space-0 { margin-bottom: 0; }
.ml-space-0 { margin-left: 0; }
.mr-space-0 { margin-right: 0; }

.mx-space-0 { margin-left: 0; margin-right: 0; }
.my-space-0 { margin-top: 0; margin-bottom: 0; }