/* Spaziatura: scala Bootstrap 4 (0 a 5) = 0, .25rem, .5rem, 1rem, 1.5rem, 3rem */
:root {
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 48px;
}

/* Padding */
.p-0  { padding: var(--sp-0) !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; }
.p-5  { padding: var(--sp-5) !important; }

.pt-0 { padding-top: var(--sp-0) !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; }
.pt-5 { padding-top: var(--sp-5) !important; }

.pb-0 { padding-bottom: var(--sp-0) !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; }
.pb-5 { padding-bottom: var(--sp-5) !important; }

.pl-0 { padding-left: var(--sp-0) !important; }
.pl-1 { padding-left: var(--sp-1) !important; }
.pl-2 { padding-left: var(--sp-2) !important; }
.pl-3 { padding-left: var(--sp-3) !important; }
.pl-4 { padding-left: var(--sp-4) !important; }
.pl-5 { padding-left: var(--sp-5) !important; }

.pr-0 { padding-right: var(--sp-0) !important; }
.pr-1 { padding-right: var(--sp-1) !important; }
.pr-2 { padding-right: var(--sp-2) !important; }
.pr-3 { padding-right: var(--sp-3) !important; }
.pr-4 { padding-right: var(--sp-4) !important; }
.pr-5 { padding-right: var(--sp-5) !important; }

/* Margin */
.m-0  { margin: var(--sp-0) !important; }
.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; }
.m-5  { margin: var(--sp-5) !important; }

.mt-0 { margin-top: var(--sp-0) !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; }
.mt-5 { margin-top: var(--sp-5) !important; }

.mb-0 { margin-bottom: var(--sp-0) !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; }
.mb-5 { margin-bottom: var(--sp-5) !important; }

.ml-0 { margin-left: var(--sp-0) !important; }
.ml-1 { margin-left: var(--sp-1) !important; }
.ml-2 { margin-left: var(--sp-2) !important; }
.ml-3 { margin-left: var(--sp-3) !important; }
.ml-4 { margin-left: var(--sp-4) !important; }
.ml-5 { margin-left: var(--sp-5) !important; }

.mr-0 { margin-right: var(--sp-0) !important; }
.mr-1 { margin-right: var(--sp-1) !important; }
.mr-2 { margin-right: var(--sp-2) !important; }
.mr-3 { margin-right: var(--sp-3) !important; }
.mr-4 { margin-right: var(--sp-4) !important; }
.mr-5 { margin-right: var(--sp-5) !important; }

/* Auto margin */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
