.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }

.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.ml-3  { margin-left: 0.75rem; }
.ml-4  { margin-left: 1rem; }
.ml-6  { margin-left: 1.5rem; }
.ml-8  { margin-left: 2rem; }
.ml-auto { margin-left: auto; }

.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 0.25rem; }
.mr-2  { margin-right: 0.5rem; }
.mr-3  { margin-right: 0.75rem; }
.mr-4  { margin-right: 1rem; }
.mr-6  { margin-right: 1.5rem; }
.mr-8  { margin-right: 2rem; }
.mr-auto { margin-right: auto; }

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

.my-0  { margin-top: 0;       margin-bottom: 0; }
.my-1  { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.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; }
.my-12 { margin-top: 3rem;    margin-bottom: 3rem; }

.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 0.25rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-3  { padding-top: 0.75rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }


.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pb-3  { padding-bottom: 0.75rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }

/* Padding Left */
.pl-0  { padding-left: 0; }
.pl-2  { padding-left: 0.5rem; }
.pl-4  { padding-left: 1rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-8  { padding-left: 2rem; }

/* Padding Right */
.pr-0  { padding-right: 0; }
.pr-2  { padding-right: 0.5rem; }
.pr-4  { padding-right: 1rem; }
.pr-6  { padding-right: 1.5rem; }
.pr-8  { padding-right: 2rem; }

/* Padding X (horizontal) */
.px-0  { padding-left: 0;       padding-right: 0; }
.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; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }

/* Padding Y (vertical) */
.py-0  { padding-top: 0;       padding-bottom: 0; }
.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; }
.py-8  { padding-top: 2rem;    padding-bottom: 2rem; }

/* Gap */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Width / Height */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Flex Utilities */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start  { justify-content: flex-start; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Text */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }

/* Opacity */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Border Radius */
.rounded-sm { border-radius: 2px; }
.rounded    { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }