/* ------------------------------------------------------------------- 
  WIDTH 
--------------------------------------------------------------------- */


.w-0 {
    width: 0px;
}

.w-px {
    width: 1px;
}

.w-0-5 {
    width: 0.125rem; /* 2px */
}

.w-1 {
    width: 0.25rem; /* 4px */
}

.w-1-5 {
    width: 0.375rem; /* 6px */
}

.w-2 {
    width: 0.5rem; /* 8px */
}

.w-2-5 {
    width: 0.625rem; /* 10px */
}

.w-3 {
    width: 0.75rem; /* 12px */
}

.w-3-5 {
    width: 0.875rem; /* 14px */
}

.w-4 {
    width: 1rem; /* 16px */
}

.w-5 {
    width: 1.25rem; /* 20px */
}

.w-6 {
    width: 1.5rem; /* 24px */
}

.w-7 {
    width: 1.75rem; /* 28px */
}

.w-8 {
    width: 2rem; /* 32px */
}

.w-9 {
    width: 2.25rem; /* 36px */
}

.w-10 {
    width: 2.5rem; /* 40px */
}

.w-11 {
    width: 2.75rem; /* 44px */
}

.w-12 {
    width: 3rem; /* 48px */
}

.w-14 {
    width: 3.5rem; /* 56px */
}

.w-16 {
    width: 4rem; /* 64px */
}

.w-20 {
    width: 5rem; /* 80px */
}

.w-24 {
    width: 6rem; /* 96px */
}

.w-28 {
    width: 7rem; /* 112px */
}

.w-32 {
    width: 8rem; /* 128px */
}

.w-36 {
    width: 9rem; /* 144px */
}

.w-40 {
    width: 10rem; /* 160px */
}

.w-44 {
    width: 11rem; /* 176px */
}

.w-48 {
    width: 12rem; /* 192px */
}

.w-52 {
    width: 13rem; /* 208px */
}

.w-56 {
    width: 14rem; /* 224px */
}

.w-60 {
    width: 15rem; /* 240px */
}

.w-64 {
    width: 16rem; /* 256px */
}

.w-72 {
    width: 18rem; /* 288px */
}

.w-80 {
    width: 20rem; /* 320px */
}

.w-96 {
    width: 24rem; /* 384px */
}

.w-auto {
    width: auto;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-2\/4 {
    width: 50%;
}

.w-3\/4 {
    width: 75%;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-3\/5 {
    width: 60%;
}

.w-4\/5 {
    width: 80%;
}

.w-1\/6 {
    width: 16.666667%;
}

.w-2\/6 {
    width: 33.333333%;
}

.w-3\/6 {
    width: 50%;
}

.w-4\/6 {
    width: 66.666667%;
}

.w-5\/6 {
    width: 83.333333%;
}

.w-1\/12 {
    width: 8.333333%;
}

.w-2\/12 {
    width: 16.666667%;
}

.w-3\/12 {
    width: 25%;
}

.w-4\/12 {
    width: 33.333333%;
}

.w-5\/12 {
    width: 41.666667%;
}

.w-6\/12 {
    width: 50%;
}

.w-7\/12 {
    width: 58.333333%;
}

.w-8\/12 {
    width: 66.666667%;
}

.w-9\/12 {
    width: 75%;
}

.w-10\/12 {
    width: 83.333333%;
}

.w-11\/12 {
    width: 91.666667%;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-svw {
    width: 100svw;
}

.w-lvw {
    width: 100lvw;
}

.w-dvw {
    width: 100dvw;
}

.w-min {
    width: min-content;
}

.w-max {
    width: max-content;
}

.w-fit {
    width: fit-content;
}


/* -------------------------------------------------------------------
   RESPONSIVE WIDTH (TAILWIND-STYLE)
--------------------------------------------------------------------- */

/* ✅ sm (≥576px) */
@media (min-width: 576px) {

    /* FIXED SIZES */
    .sm\:w-0 {
        width: 0;
    }

    .sm\:w-1 {
        width: 0.25rem;
    }

    .sm\:w-2 {
        width: 0.5rem;
    }

    .sm\:w-4 {
        width: 1rem;
    }

    .sm\:w-6 {
        width: 1.5rem;
    }

    .sm\:w-8 {
        width: 2rem;
    }

    .sm\:w-10 {
        width: 2.5rem;
    }

    .sm\:w-12 {
        width: 3rem;
    }

    .sm\:w-16 {
        width: 4rem;
    }

    .sm\:w-24 {
        width: 6rem;
    }

    .sm\:w-32 {
        width: 8rem;
    }

    /* FRACTIONS */
    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:w-1\/3 {
        width: 33.333333%;
    }

    .sm\:w-2\/3 {
        width: 66.666667%;
    }

    /* FULL / AUTO */
    .sm\:w-full {
        width: 100%;
    }

    .sm\:w-auto {
        width: auto;
    }

    /* CONTENT */
    .sm\:w-fit {
        width: fit-content;
    }

    .sm\:w-max {
        width: max-content;
    }
}


/* ✅ md (≥768px) */
@media (min-width: 768px) {

    /* FIXED SIZES */
    .md\:w-0 {
        width: 0;
    }

    .md\:w-1 {
        width: 0.25rem;
    }

    .md\:w-2 {
        width: 0.5rem;
    }

    .md\:w-4 {
        width: 1rem;
    }

    .md\:w-6 {
        width: 1.5rem;
    }

    .md\:w-8 {
        width: 2rem;
    }

    .md\:w-10 {
        width: 2.5rem;
    }

    .md\:w-12 {
        width: 3rem;
    }

    .md\:w-16 {
        width: 4rem;
    }

    .md\:w-24 {
        width: 6rem;
    }

    .md\:w-32 {
        width: 8rem;
    }

    /* FRACTIONS */
    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 33.333333%;
    }

    .md\:w-2\/3 {
        width: 66.666667%;
    }
    /* FULL / AUTO */
    .md\:w-full {
        width: 100%;
    }

    .md\:w-auto {
        width: auto;
    }

    /* CONTENT */
    .md\:w-fit {
        width: fit-content;
    }

    .md\:w-max {
        width: max-content;
    }
}

/* ------------------------------------------------------------------- 
  MIN-WIDTH 
--------------------------------------------------------------------- */
.min-w-0 {
    min-width: 0px;
}

.min-w-1 {
    min-width: 0.25rem; /* 4px */
}

.min-w-2 {
    min-width: 0.5rem; /* 8px */
}

.min-w-3 {
    min-width: 0.75rem; /* 12px */
}

.min-w-4 {
    min-width: 1rem; /* 16px */
}

.min-w-5 {
    min-width: 1.25rem; /* 20px */
}

.min-w-6 {
    min-width: 1.5rem; /* 24px */
}

.min-w-7 {
    min-width: 1.75rem; /* 28px */
}

.min-w-8 {
    min-width: 2rem; /* 32px */
}

.min-w-9 {
    min-width: 2.25rem; /* 36px */
}

.min-w-10 {
    min-width: 2.5rem; /* 40px */
}

.min-w-11 {
    min-width: 2.75rem; /* 44px */
}

.min-w-12 {
    min-width: 3rem; /* 48px */
}

.min-w-14 {
    min-width: 3.5rem; /* 56px */
}

.min-w-16 {
    min-width: 4rem; /* 64px */
}

.min-w-20 {
    min-width: 5rem; /* 80px */
}

.min-w-24 {
    min-width: 6rem; /* 96px */
}

.min-w-28 {
    min-width: 7rem; /* 112px */
}

.min-w-32 {
    min-width: 8rem; /* 128px */
}

.min-w-36 {
    min-width: 9rem; /* 144px */
}

.min-w-40 {
    min-width: 10rem; /* 160px */
}

.min-w-44 {
    min-width: 11rem; /* 176px */
}

.min-w-48 {
    min-width: 12rem; /* 192px */
}

.min-w-52 {
    min-width: 13rem; /* 208px */
}

.min-w-56 {
    min-width: 14rem; /* 224px */
}

.min-w-60 {
    min-width: 15rem; /* 240px */
}

.min-w-64 {
    min-width: 16rem; /* 256px */
}

.min-w-72 {
    min-width: 18rem; /* 288px */
}

.min-w-80 {
    min-width: 20rem; /* 320px */
}

.min-w-96 {
    min-width: 24rem; /* 384px */
}

.min-w-px {
    min-width: 1px;
}

.min-w-0\.5 {
    min-width: 0.125rem; /* 2px */
}

.min-w-1\.5 {
    min-width: 0.375rem; /* 6px */
}

.min-w-2\.5 {
    min-width: 0.625rem; /* 10px */
}

.min-w-3\.5 {
    min-width: 0.875rem; /* 14px */
}

.min-w-full {
    min-width: 100%;
}

.min-w-min {
    min-width: min-content;
}

.min-w-max {
    min-width: max-content;
}

.min-w-fit {
    min-width: fit-content;
}
/* ------------------------------------------------------------------- 
  MAX-WIDTH 
--------------------------------------------------------------------- */
.max-w-0 {
    max-width: 0px;
}

.max-w-px {
    max-width: 1px;
}

.max-w-0\.5 {
    max-width: 0.125rem; /* 2px */
}

.max-w-1 {
    max-width: 0.25rem; /* 4px */
}

.max-w-1-5 {
    max-width: 0.375rem; /* 6px */
}

.max-w-2 {
    max-width: 0.5rem; /* 8px */
}

.max-w-2-5 {
    max-width: 0.625rem; /* 10px */
}

.max-w-3 {
    max-width: 0.75rem; /* 12px */
}

.max-w-3-5 {
    max-width: 0.875rem; /* 14px */
}

.max-w-4 {
    max-width: 1rem; /* 16px */
}

.max-w-5 {
    max-width: 1.25rem; /* 20px */
}

.max-w-6 {
    max-width: 1.5rem; /* 24px */
}

.max-w-7 {
    max-width: 1.75rem; /* 28px */
}

.max-w-8 {
    max-width: 2rem; /* 32px */
}

.max-w-9 {
    max-width: 2.25rem; /* 36px */
}

.max-w-10 {
    max-width: 2.5rem; /* 40px */
}

.max-w-11 {
    max-width: 2.75rem; /* 44px */
}

.max-w-12 {
    max-width: 3rem; /* 48px */
}

.max-w-14 {
    max-width: 3.5rem; /* 56px */
}

.max-w-16 {
    max-width: 4rem; /* 64px */
}

.max-w-20 {
    max-width: 5rem; /* 80px */
}

.max-w-24 {
    max-width: 6rem; /* 96px */
}

.max-w-28 {
    max-width: 7rem; /* 112px */
}

.max-w-32 {
    max-width: 8rem; /* 128px */
}

.max-w-36 {
    max-width: 9rem; /* 144px */
}

.max-w-40 {
    max-width: 10rem; /* 160px */
}

.max-w-44 {
    max-width: 11rem; /* 176px */
}

.max-w-48 {
    max-width: 12rem; /* 192px */
}

.max-w-52 {
    max-width: 13rem; /* 208px */
}

.max-w-56 {
    max-width: 14rem; /* 224px */
}

.max-w-60 {
    max-width: 15rem; /* 240px */
}

.max-w-64 {
    max-width: 16rem; /* 256px */
}

.max-w-72 {
    max-width: 18rem; /* 288px */
}

.max-w-80 {
    max-width: 20rem; /* 320px */
}

.max-w-96 {
    max-width: 24rem; /* 384px */
}

.max-w-none {
    max-width: none;
}

.max-w-xs {
    max-width: 20rem; /* 320px */
}

.max-w-sm {
    max-width: 24rem; /* 384px */
}

.max-w-md {
    max-width: 28rem; /* 448px */
}

.max-w-lg {
    max-width: 32rem; /* 512px */
}

.max-w-xl {
    max-width: 36rem; /* 576px */
}

.max-w-2xl {
    max-width: 42rem; /* 672px */
}

.max-w-3xl {
    max-width: 48rem; /* 768px */
}

.max-w-4xl {
    max-width: 56rem; /* 896px */
}

.max-w-5xl {
    max-width: 64rem; /* 1024px */
}

.max-w-6xl {
    max-width: 72rem; /* 1152px */
}

.max-w-7xl {
    max-width: 80rem; /* 1280px */
}

.max-w-full {
    max-width: 100%;
}

.max-w-min {
    max-width: min-content;
}

.max-w-max {
    max-width: max-content;
}

.max-w-fit {
    max-width: fit-content;
}

.max-w-prose {
    max-width: 65ch;
}

.max-w-screen-sm {
    max-width: 640px;
}

.max-w-screen-md {
    max-width: 768px;
}

.max-w-screen-lg {
    max-width: 1024px;
}

.max-w-screen-xl {
    max-width: 1280px;
}

.max-w-screen-2xl {
    max-width: 1536px;
}