/* ================================================== */
/* Tailwind CSS Width & Height (Sizing) Utilities       */
/* Fixed scale, fractions, full/screen/auto/min/max etc.*/
/* ================================================== */

:root {
  --size-0: 0px;
  --size-px: 1px;
  --size-0_5: 0.125rem;
  --size-1: 0.25rem;
  --size-1_5: 0.375rem;
  --size-2: 0.5rem;
  --size-2_5: 0.625rem;
  --size-3: 0.75rem;
  --size-3_5: 0.875rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-9: 2.25rem;
  --size-10: 2.5rem;
  --size-11: 2.75rem;
  --size-12: 3rem;
  --size-14: 3.5rem;
  --size-16: 4rem;
  --size-20: 5rem;
  --size-24: 6rem;
  --size-28: 7rem;
  --size-32: 8rem;
  --size-36: 9rem;
  --size-40: 10rem;
  --size-44: 11rem;
  --size-48: 12rem;
  --size-52: 13rem;
  --size-56: 14rem;
  --size-60: 15rem;
  --size-64: 16rem;
  --size-72: 18rem;
  --size-80: 20rem;
  --size-96: 24rem;
}

/* ===== WIDTH — Fixed scale (w-0 ... w-96) ===== */
.w-0 { width: var(--size-0); }
.w-px { width: var(--size-px); }
.w-0.5 { width: var(--size-0_5); }
.w-1 { width: var(--size-1); }
.w-1.5 { width: var(--size-1_5); }
.w-2 { width: var(--size-2); }
.w-2.5 { width: var(--size-2_5); }
.w-3 { width: var(--size-3); }
.w-3.5 { width: var(--size-3_5); }
.w-4 { width: var(--size-4); }
.w-5 { width: var(--size-5); }
.w-6 { width: var(--size-6); }
.w-7 { width: var(--size-7); }
.w-8 { width: var(--size-8); }
.w-9 { width: var(--size-9); }
.w-10 { width: var(--size-10); }
.w-11 { width: var(--size-11); }
.w-12 { width: var(--size-12); }
.w-14 { width: var(--size-14); }
.w-16 { width: var(--size-16); }
.w-20 { width: var(--size-20); }
.w-24 { width: var(--size-24); }
.w-28 { width: var(--size-28); }
.w-32 { width: var(--size-32); }
.w-36 { width: var(--size-36); }
.w-40 { width: var(--size-40); }
.w-44 { width: var(--size-44); }
.w-48 { width: var(--size-48); }
.w-52 { width: var(--size-52); }
.w-56 { width: var(--size-56); }
.w-60 { width: var(--size-60); }
.w-64 { width: var(--size-64); }
.w-72 { width: var(--size-72); }
.w-80 { width: var(--size-80); }
.w-96 { width: var(--size-96); }

/* ===== WIDTH — Fractions (w-1/2, w-1/3, w-1/4 ... w-11/12) ===== */
.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%; }

/* ===== WIDTH — Keywords ===== */
.w-auto { width: auto; }
.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; }

/* ===== WIDTH — Arbitrary value example (w-[440px]) ===== */
/* Tailwind generates these on demand from the bracket value.
   e.g. w-[440px] -> .w-\[440px\] { width: 440px; }
   e.g. w-[50%]   -> .w-\[50\%\]  { width: 50%; }
   e.g. w-[30rem] -> .w-\[30rem\] { width: 30rem; }          */
.w-\[440px\] { width: 440px; } /* example */

/* ===== HEIGHT — Fixed scale (h-0 ... h-96) ===== */
.h-0 { height: var(--size-0); }
.h-px { height: var(--size-px); }
.h-0.5 { height: var(--size-0_5); }
.h-1 { height: var(--size-1); }
.h-1.5 { height: var(--size-1_5); }
.h-2 { height: var(--size-2); }
.h-2.5 { height: var(--size-2_5); }
.h-3 { height: var(--size-3); }
.h-3.5 { height: var(--size-3_5); }
.h-4 { height: var(--size-4); }
.h-5 { height: var(--size-5); }
.h-6 { height: var(--size-6); }
.h-7 { height: var(--size-7); }
.h-8 { height: var(--size-8); }
.h-9 { height: var(--size-9); }
.h-10 { height: var(--size-10); }
.h-11 { height: var(--size-11); }
.h-12 { height: var(--size-12); }
.h-14 { height: var(--size-14); }
.h-16 { height: var(--size-16); }
.h-20 { height: var(--size-20); }
.h-24 { height: var(--size-24); }
.h-28 { height: var(--size-28); }
.h-32 { height: var(--size-32); }
.h-36 { height: var(--size-36); }
.h-40 { height: var(--size-40); }
.h-44 { height: var(--size-44); }
.h-48 { height: var(--size-48); }
.h-52 { height: var(--size-52); }
.h-56 { height: var(--size-56); }
.h-60 { height: var(--size-60); }
.h-64 { height: var(--size-64); }
.h-72 { height: var(--size-72); }
.h-80 { height: var(--size-80); }
.h-96 { height: var(--size-96); }

/* ===== HEIGHT — Fractions (h-1/2, h-1/3, h-1/4 ... h-11/12) ===== */
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-2\/4 { height: 50%; }
.h-3\/4 { height: 75%; }
.h-1\/5 { height: 20%; }
.h-2\/5 { height: 40%; }
.h-3\/5 { height: 60%; }
.h-4\/5 { height: 80%; }
.h-1\/6 { height: 16.666667%; }
.h-2\/6 { height: 33.333333%; }
.h-3\/6 { height: 50%; }
.h-4\/6 { height: 66.666667%; }
.h-5\/6 { height: 83.333333%; }
.h-1\/12 { height: 8.333333%; }
.h-2\/12 { height: 16.666667%; }
.h-3\/12 { height: 25%; }
.h-4\/12 { height: 33.333333%; }
.h-5\/12 { height: 41.666667%; }
.h-6\/12 { height: 50%; }
.h-7\/12 { height: 58.333333%; }
.h-8\/12 { height: 66.666667%; }
.h-9\/12 { height: 75%; }
.h-10\/12 { height: 83.333333%; }
.h-11\/12 { height: 91.666667%; }

/* ===== HEIGHT — Keywords ===== */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-svh { height: 100svh; }
.h-lvh { height: 100lvh; }
.h-dvh { height: 100dvh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

/* ===== HEIGHT — Arbitrary value example (h-[440px]) ===== */
.h-\[440px\] { height: 440px; } /* example */

/* ===== MIN-WIDTH (min-w-*) ===== */
.min-w-0 { min-width: 0px; }
.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-*) ===== */
.max-w-0 { max-width: 0rem; }
.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.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; }

/* ===== MIN-HEIGHT (min-h-*) ===== */
.min-h-0 { min-height: 0px; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-svh { min-height: 100svh; }
.min-h-lvh { min-height: 100lvh; }
.min-h-dvh { min-height: 100dvh; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }
.min-h-fit { min-height: fit-content; }

/* ===== MAX-HEIGHT (max-h-*) ===== */
.max-h-0 { max-height: var(--size-0); }
.max-h-px { max-height: var(--size-px); }
.max-h-0.5 { max-height: var(--size-0_5); }
.max-h-1 { max-height: var(--size-1); }
.max-h-1.5 { max-height: var(--size-1_5); }
.max-h-2 { max-height: var(--size-2); }
.max-h-2.5 { max-height: var(--size-2_5); }
.max-h-3 { max-height: var(--size-3); }
.max-h-3.5 { max-height: var(--size-3_5); }
.max-h-4 { max-height: var(--size-4); }
.max-h-5 { max-height: var(--size-5); }
.max-h-6 { max-height: var(--size-6); }
.max-h-7 { max-height: var(--size-7); }
.max-h-8 { max-height: var(--size-8); }
.max-h-9 { max-height: var(--size-9); }
.max-h-10 { max-height: var(--size-10); }
.max-h-11 { max-height: var(--size-11); }
.max-h-12 { max-height: var(--size-12); }
.max-h-14 { max-height: var(--size-14); }
.max-h-16 { max-height: var(--size-16); }
.max-h-20 { max-height: var(--size-20); }
.max-h-24 { max-height: var(--size-24); }
.max-h-28 { max-height: var(--size-28); }
.max-h-32 { max-height: var(--size-32); }
.max-h-36 { max-height: var(--size-36); }
.max-h-40 { max-height: var(--size-40); }
.max-h-44 { max-height: var(--size-44); }
.max-h-48 { max-height: var(--size-48); }
.max-h-52 { max-height: var(--size-52); }
.max-h-56 { max-height: var(--size-56); }
.max-h-60 { max-height: var(--size-60); }
.max-h-64 { max-height: var(--size-64); }
.max-h-72 { max-height: var(--size-72); }
.max-h-80 { max-height: var(--size-80); }
.max-h-96 { max-height: var(--size-96); }
.max-h-none { max-height: none; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-svh { max-height: 100svh; }
.max-h-lvh { max-height: 100lvh; }
.max-h-dvh { max-height: 100dvh; }
.max-h-min { max-height: min-content; }
.max-h-max { max-height: max-content; }
.max-h-fit { max-height: fit-content; }

/* ===== SIZE — sets width AND height together (size-*) ===== */
.size-0 { width: var(--size-0); height: var(--size-0); }
.size-px { width: var(--size-px); height: var(--size-px); }
.size-0.5 { width: var(--size-0_5); height: var(--size-0_5); }
.size-1 { width: var(--size-1); height: var(--size-1); }
.size-1.5 { width: var(--size-1_5); height: var(--size-1_5); }
.size-2 { width: var(--size-2); height: var(--size-2); }
.size-2.5 { width: var(--size-2_5); height: var(--size-2_5); }
.size-3 { width: var(--size-3); height: var(--size-3); }
.size-3.5 { width: var(--size-3_5); height: var(--size-3_5); }
.size-4 { width: var(--size-4); height: var(--size-4); }
.size-5 { width: var(--size-5); height: var(--size-5); }
.size-6 { width: var(--size-6); height: var(--size-6); }
.size-7 { width: var(--size-7); height: var(--size-7); }
.size-8 { width: var(--size-8); height: var(--size-8); }
.size-9 { width: var(--size-9); height: var(--size-9); }
.size-10 { width: var(--size-10); height: var(--size-10); }
.size-11 { width: var(--size-11); height: var(--size-11); }
.size-12 { width: var(--size-12); height: var(--size-12); }
.size-14 { width: var(--size-14); height: var(--size-14); }
.size-16 { width: var(--size-16); height: var(--size-16); }
.size-20 { width: var(--size-20); height: var(--size-20); }
.size-24 { width: var(--size-24); height: var(--size-24); }
.size-28 { width: var(--size-28); height: var(--size-28); }
.size-32 { width: var(--size-32); height: var(--size-32); }
.size-36 { width: var(--size-36); height: var(--size-36); }
.size-40 { width: var(--size-40); height: var(--size-40); }
.size-44 { width: var(--size-44); height: var(--size-44); }
.size-48 { width: var(--size-48); height: var(--size-48); }
.size-52 { width: var(--size-52); height: var(--size-52); }
.size-56 { width: var(--size-56); height: var(--size-56); }
.size-60 { width: var(--size-60); height: var(--size-60); }
.size-64 { width: var(--size-64); height: var(--size-64); }
.size-72 { width: var(--size-72); height: var(--size-72); }
.size-80 { width: var(--size-80); height: var(--size-80); }
.size-96 { width: var(--size-96); height: var(--size-96); }
.size-auto { width: auto; height: auto; }
.size-full { width: 100%; height: 100%; }
.size-min { width: min-content; height: min-content; }
.size-max { width: max-content; height: max-content; }
.size-fit { width: fit-content; height: fit-content; }