/* ===== Tailwind-Like Spacing Utilities (custom) ===== */
.h-0 { height: 0; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.h-auto { height: auto; }
.h-full { height: 100%; }

.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; }

.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; }

.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-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.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-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }

.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.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-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }

.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-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }

@media (min-width: 768px) {
    .md\:h-0 { height: 0; }
    .md\:h-4 { height: 1rem; }
    .md\:h-6 { height: 1.5rem; }
    .md\:h-8 { height: 2rem; }
    .md\:h-10 { height: 2.5rem; }
    .md\:h-12 { height: 3rem; }
    .md\:h-16 { height: 4rem; }
    .md\:h-20 { height: 5rem; }
    .md\:h-24 { height: 6rem; }
    .md\:h-32 { height: 8rem; }
    .md\:h-auto { height: auto; }
    .md\:h-full { height: 100%; }

    .md\:mt-0 { margin-top: 0; }
    .md\:mt-4 { margin-top: 1rem; }
    .md\:mt-6 { margin-top: 1.5rem; }
    .md\:mt-8 { margin-top: 2rem; }
    .md\:mt-10 { margin-top: 2.5rem; }
    .md\:mt-12 { margin-top: 3rem; }

    .md\:mb-0 { margin-bottom: 0; }
    .md\:mb-4 { margin-bottom: 1rem; }
    .md\:mb-6 { margin-bottom: 1.5rem; }
    .md\:mb-8 { margin-bottom: 2rem; }
    .md\:mb-10 { margin-bottom: 2.5rem; }
    .md\:mb-12 { margin-bottom: 3rem; }
    .md\:mb-24 { margin-bottom: calc(var(--spacing) * 24);}

    .md\:mx-0 { margin-left: 0; margin-right: 0; }
    .md\:mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
    .md\:mx-4 { margin-left: 1rem; margin-right: 1rem; }
    .md\:mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
    .md\:mx-8 { margin-left: 2rem; margin-right: 2rem; }
    .md\:mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
    .md\:mx-12 { margin-left: 3rem; margin-right: 3rem; }
    .md\:mx-auto { margin-left: auto; margin-right: auto; }

    .md\:my-0 { margin-top: 0; margin-bottom: 0; }
    .md\:my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .md\:my-4 { margin-top: 1rem; margin-bottom: 1rem; }
    .md\:my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
    .md\:my-8 { margin-top: 2rem; margin-bottom: 2rem; }
    .md\:my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
    .md\:my-12 { margin-top: 3rem; margin-bottom: 3rem; }
    .md\:my-16 { margin-top: 4rem; margin-bottom: 4rem; }

    .md\:px-0 { padding-left: 0; padding-right: 0; }
    .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
    .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

    .md\:py-0 { padding-top: 0; padding-bottom: 0; }
    .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    .md\:pt-0 { padding-top: 0; }
    .md\:pt-2 { padding-top: 0.5rem; }
    .md\:pt-4 { padding-top: 1rem; }
    .md\:pt-6 { padding-top: 1.5rem; }
    .md\:pt-8 { padding-top: 2rem; }
    .md\:pt-10 { padding-top: 2.5rem; }
    .md\:pt-12 { padding-top: 3rem; }

    .md\:pb-0 { padding-bottom: 0; }
    .md\:pb-2 { padding-bottom: 0.5rem; }
    .md\:pb-4 { padding-bottom: 1rem; }
    .md\:pb-6 { padding-bottom: 1.5rem; }
    .md\:pb-8 { padding-bottom: 2rem; }
    .md\:pb-10 { padding-bottom: 2.5rem; }
    .md\:pb-12 { padding-bottom: 3rem; }
}