/* === Spacing scale ===
0     = 0
0.5   = 0.125rem
1     = 0.25rem
1.5   = 0.375rem
2     = 0.5rem
2.5   = 0.625rem
3     = 0.75rem
3.5   = 0.875rem
4     = 1rem
5     = 1.25rem
6     = 1.5rem
8     = 2rem
10    = 2.5rem
12    = 3rem
16    = 4rem
*/

/* Utility generator */
.m-0  { margin: 0; }
.m-0\.5  { margin: 0.125rem; }
.m-1  { margin: 0.25rem; }
.m-1\.5  { margin: 0.375rem; }
.m-2  { margin: 0.5rem; }
.m-2\.5  { margin: 0.625rem; }
.m-3  { margin: 0.75rem; }
.m-3\.5  { margin: 0.875rem; }
.m-4  { margin: 1rem; }
.m-5  { margin: 1.25rem; }
.m-6  { margin: 1.5rem; }
.m-8  { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }

/* Margin directions */
.mt-0   { margin-top: 0; }
.mb-0   { margin-bottom: 0; }
.ml-0   { margin-left: 0; }
.mr-0   { margin-right: 0; }

.mt-0\.5 { margin-top: 0.125rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.ml-0\.5 { margin-left: 0.125rem; }
.mr-0\.5 { margin-right: 0.125rem; }

.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }

.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }

.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-4 { margin-left: 1rem; }
.mr-4 { margin-right: 1rem; }

.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-6 { margin-left: 1.5rem; }
.mr-6 { margin-right: 1.5rem; }

.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-8 { margin-left: 2rem; }
.mr-8 { margin-right: 2rem; }

.mx-0   { margin-left: 0; margin-right: 0; }
.mx-2   { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4   { margin-left: 1rem; margin-right: 1rem; }
.mx-6   { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8   { margin-left: 2rem; margin-right: 2rem; }

.my-0   { margin-top: 0; margin-bottom: 0; }
.my-2   { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4   { margin-top: 1rem; margin-bottom: 1rem; }
.my-6   { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8   { margin-top: 2rem; margin-bottom: 2rem; }

/* === Padding === */
.p-0  { padding: 0; }
.p-0\.5  { padding: 0.125rem; }
.p-1  { padding: 0.25rem; }
.p-1\.5  { padding: 0.375rem; }
.p-2  { padding: 0.5rem; }
.p-2\.5  { padding: 0.625rem; }
.p-3  { padding: 0.75rem; }
.p-3\.5  { padding: 0.875rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }

/* Padding directions */
.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }

.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.pl-4 { padding-left: 1rem; }
.pr-4 { padding-right: 1rem; }

.pt-6 { padding-top: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-6 { padding-right: 1.5rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }