sizes.css

:root {
  /****************************************************************
  * Fixed Size
  *****************************************************************/
  --size-0_5: 0.125rem; /* 2px */
  --size-1:   0.25rem;  /* 4px */
  --size-1_5: 0.375rem; /* 6px */
  --size-2:   0.5rem;   /* 8px */
  --size-2_5: 0.625rem; /* 10px */
  --size-3:   0.75rem;  /* 12px */
  --size-3_5: 0.875rem; /* 14px */
  --size-4:   1rem;     /* 16px */
  --size-5:   1.25rem;  /* 20px */
  --size-6:   1.5rem;   /* 24px */
  --size-7:   1.75rem;  /* 28px */
  --size-8:   2rem;     /* 32px */
  --size-9:   2.25rem;  /* 36px */
  --size-10:  2.5rem;   /* 40px */
  --size-11:  2.75rem;  /* 44px */
  --size-12:  3rem;     /* 48px */
  --size-14:  3.5rem;   /* 56px */
  --size-16:  4rem;     /* 64px */
  --size-20:  5rem;     /* 80px */
  --size-24:  6rem;     /* 96px */
  --size-28:  7rem;     /* 112px */
  --size-32:  8rem;     /* 128px */
  --size-36:  9rem;     /* 144px */
  --size-40:  10rem;    /* 160px */
  --size-44:  11rem;    /* 176px */
  --size-48:  12rem;    /* 192px */
  --size-52:  13rem;    /* 208px */
  --size-56:  14rem;    /* 224px */
  --size-60:  15rem;    /* 240px */
  --size-64:  16rem;    /* 256px */
  --size-72:  18rem;    /* 288px */
  --size-80:  20rem;    /* 320px */
  --size-96:  24rem;    /* 384px */

  /****************************************************************
  * Percentual Size
  *****************************************************************/
  --size-1-2:   50%;
  --size-1-3:   33.333333%;
  --size-2-3:   66.666667%;
  --size-1-4:   25%;
  --size-2-4:   50%;
  --size-3-4:   75%;
  --size-1-5:   20%;
  --size-2-5:   40%;
  --size-3-5:   60%;
  --size-4-5:   80%;
  --size-1-6:   16.666667%;
  --size-2-6:   33.333333%;
  --size-3-6:   50%;
  --size-4-6:   66.666667%;
  --size-5-6:   83.333333%;
  --size-1-12:  8.333333%;
  --size-2-12:  16.666667%;
  --size-3-12:  25%;
  --size-4-12:  33.333333%;
  --size-5-12:  41.666667%;
  --size-6-12:  50%;
  --size-7-12:  58.333333%;
  --size-8-12:  66.666667%;
  --size-9-12:  75%;
  --size-10-12: 83.333333%;
  --size-11-12: 91.666667%;
  --size-full:  100%;

  /****************************************************************
  * Max Inline Sizes
  *****************************************************************/
  --max-i-3xs: 16rem; /* 256px */
  --max-i-2xs: 18rem; /* 288px */
  --max-i-xs:  20rem; /* 320px */
  --max-i-sm:  24rem; /* 384px */
  --max-i-md:  28rem; /* 448px */
  --max-i-lg:  32rem; /* 512px */
  --max-i-xl:  36rem; /* 576px */
  --max-i-2xl: 42rem; /* 672px */
  --max-i-3xl: 48rem; /* 768px */
  --max-i-4xl: 56rem; /* 896px */
  --max-i-5xl: 64rem; /* 1024px */
  --max-i-6xl: 72rem; /* 1152px */
  --max-i-7xl: 80rem; /* 1280px */

  /****************************************************************
  * Aspect Ratio
  *****************************************************************/
  --aspect-square: 1/1;
  --aspect-widescreen: 16/9;

  /****************************************************************
  * Breakpoints
  *****************************************************************/
  --breakpoint-sm:  40rem; /* 640px */
  --breakpoint-md:  48rem; /* 768px */
  --breakpoint-lg:  64rem; /* 1024px */
  --breakpoint-xl:  80rem; /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */
}