/* Spacing scale based on your .mb-4 = 8px  
   So: 1=2px, 2=4px, 3=6px, 4=8px */
:root {
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
}

.m-1 { margin: var(--sp-1) !important; }
.m-2 { margin: var(--sp-2) !important; }
.m-3 { margin: var(--sp-3) !important; }
.m-4 { margin: var(--sp-4) !important; }

.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }

.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }

.ms-1 { margin-left: var(--sp-1) !important; }
.ms-2 { margin-left: var(--sp-2) !important; }
.ms-3 { margin-left: var(--sp-3) !important; }
.ms-4 { margin-left: var(--sp-4) !important; }

.me-1 { margin-right: var(--sp-1) !important; }
.me-2 { margin-right: var(--sp-2) !important; }
.me-3 { margin-right: var(--sp-3) !important; }
.me-4 { margin-right: var(--sp-4) !important; }

.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.mx-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }

.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }

.p-1 { padding: var(--sp-1) !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }

.pt-1 { padding-top: var(--sp-1) !important; }
.pt-2 { padding-top: var(--sp-2) !important; }
.pt-3 { padding-top: var(--sp-3) !important; }
.pt-4 { padding-top: var(--sp-4) !important; }

.pb-1 { padding-bottom: var(--sp-1) !important; }
.pb-2 { padding-bottom: var(--sp-2) !important; }
.pb-3 { padding-bottom: var(--sp-3) !important; }
.pb-4 { padding-bottom: var(--sp-4) !important; }

.ps-1 { padding-left: var(--sp-1) !important; }
.ps-2 { padding-left: var(--sp-2) !important; }
.ps-3 { padding-left: var(--sp-3) !important; }
.ps-4 { padding-left: var(--sp-4) !important; }

.pe-1 { padding-right: var(--sp-1) !important; }
.pe-2 { padding-right: var(--sp-2) !important; }
.pe-3 { padding-right: var(--sp-3) !important; }
.pe-4 { padding-right: var(--sp-4) !important; }

.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }

.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }