/* Margin: All */
.m-s  { margin: var(--space-s); }
.m-m  { margin: var(--space-m); }
.m-l  { margin: var(--space-l); }

/* Margin: X Axis (left & right) */
.mx-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.mx-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.mx-l { margin-left: var(--space-l); margin-right: var(--space-l); }

/* Margin: Y Axis (top & bottom) */
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }

/* Padding: All */
.p-s  { padding: var(--space-s); }
.p-m  { padding: var(--space-m); }
.p-l  { padding: var(--space-l); }

/* Padding: X Axis (left & right) */
.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }

/* Padding: Y Axis (top & bottom) */
.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }

/*Layout*/
.is-container {
  container-type: inline-size;
}