:root {
  --font-es-sans: "UBA Sans", Sans-serif;
  --font-roboto: "Roboto", sans-serif;
  /* Font sizes */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.25rem; /* 20px */
  --fs-2xl: 1.5rem; /* 24px */
  --fs-3xl: 2rem; /* 32px */
  --fs-4xl: 2.5rem; /* 40px */
  --fs-5xl: 3rem; /* 48px */
  --fs-6xl: 3.5rem; /* 56px */

  /* Line heights */
  --lh-xs: 1rem; /* 16px */
  --lh-sm: 1.25rem; /* 20px */
  --lh-base: 1.5rem; /* 24px */
  --lh-lg: 1.75rem; /* 28px */
  --lh-xl: 2rem; /* 32px */
  --lh-2xl: 2.5rem; /* 40px */
  --lh-3xl: 3rem; /* 48px */
  --lh-4xl: 3.5rem; /* 56px */
  --lh-5xl: 4rem; /* 64px */
  --lh-6xl: 4.375rem; /* 70px */

  --fw-300: 300; /* Light */
  --fw-400: 400; /* Regular */
  --fw-500: 500; /* Medium */
  --fw-600: 600; /* Semi-bold */
  --fw-700: 700; /* Bold */
  --fw-800: 800; /* Extra-bold */
  --fw-900: 900; /* Black */

  /* spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;

  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-9999: 9999px; /* full pill */
  --radius-full: 50%; /* perfect circle */
}

.fs-xs :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.fs-sm :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.fs-base :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.fs-lg :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.fs-xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}

.fs-2xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
}

.fs-3xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
}

.fs-4xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
}

.fs-5xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-5xl);
  line-height: var(--lh-5xl);
}

.fs-6xl :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-size: var(--fs-6xl);
  line-height: var(--lh-6xl);
}

.font-dm-sans
  :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, small, label, li) {
  font-family: var(--font-es-sans);
}

.font-roboto :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, small, label, li) {
  font-family: var(--font-roboto);
}

.fw-300 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-300);
}

.fw-400 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-400);
}

.fw-500 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-500);
}

.fw-600 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-600);
}

.fw-700 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-700);
}

.fw-800 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-800);
}

.fw-900 :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
  font-weight: var(--fw-900);
}

/* Percentage-based widths */
.w-25 {
  width: 25%;
}
.w-33 {
  width: 33.333%;
}
.w-50 {
  width: 50%;
}
.w-66 {
  width: 66.666%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100%;
}

/* Fixed widths */
.w-100px {
  width: 100px;
}
.w-200px {
  width: 200px;
}
.w-300px {
  width: 300px;
}
.w-400px {
  width: 400px;
}
.w-500px {
  width: 500px;
}

/* Max widths */
.max-w-sm {
  max-width: 480px;
}
.max-w-md {
  max-width: 768px;
}
.max-w-lg {
  max-width: 1024px;
}
.max-w-xl {
  max-width: 1280px;
}
.max-w-full {
  max-width: 100%;
}

.max-w-default {
  max-width: 1350px;
}

/* Auto */
.w-auto {
  width: auto;
}

/* tablet */
@media (max-width: 1024px) {
  .max-w-default {
    max-width: 680px;
  }

  .w-25,
  .w-33,
  .w-50,
  .w-66,
  .w-75,
  .w-100,
  .w-100px,
  .w-200px,
  .w-300px,
  .w-400px,
  .w-500px,
  .w-auto {
    width: 100% !important;
  }

  .max-w-sm,
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-full {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .fs-5xl
    :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
  }

  .fs-5xl
    :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
  }

  .fs-6xl
    :is(p, h1, h2, h3, h4, h5, h6, span, a, strong, em, small, label, li) {
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
  }
}

/* tablet and mobiile */
@media (max-width: 1024px) {
  .max-w-default {
    max-width: 680px;
  }

  /* .p-64 {
    padding: var(--space-30) !important;
  }
  .pt-64 {
    padding-top: var(--space-30) !important;
  }
  .pb-64 {
    padding-bottom: var(--space-30) !important;
  }
  .pl-64 {
    padding-left: var(--space-30) !important;
  }
  .pr-64 {
    padding-right: var(--space-30) !important;
  }
  .px-64 {
    padding-left: var(--space-30) !important;
    padding-right: var(--space-30) !important;
  }
  .py-64 {
    padding-top: var(--space-30) !important;
    padding-bottom: var(--space-30) !important;
  }

  .m-64 {
    margin: var(--space-30) !important;
  }
  .mt-64 {
    margin-top: var(--space-30) !important;
  }
  .mb-64 {
    margin-bottom: var(--space-30) !important;
  }
  .ml-64 {
    margin-left: var(--space-30) !important;
  }
  .mr-64 {
    margin-right: var(--space-30) !important;
  }
  .mx-64 {
    margin-left: var(--space-30) !important;
    margin-right: var(--space-30) !important;
  }
  .my-64 {
    margin-top: var(--space-30) !important;
    margin-bottom: var(--space-30) !important;
  } */

  .smd-p_20 {
    padding: var(--space-20) !important;
  }
  .smd-pt_20 {
    padding-top: var(--space-20) !important;
  }
  .smd-pb_20 {
    padding-bottom: var(--space-20) !important;
  }
  .smd-pl_20 {
    padding-left: var(--space-20) !important;
  }
  .smd-pr_20 {
    padding-right: var(--space-20) !important;
  }
  .smd-px_20 {
    padding-left: var(--space-20) !important;
    padding-right: var(--space-20) !important;
  }
  .smd-py_20 {
    padding-top: var(--space-20) !important;
    padding-bottom: var(--space-20) !important;
  }

  .smd-m_20 {
    margin: var(--space-20) !important;
  }
  .smd-mt_20 {
    margin-top: var(--space-20) !important;
  }
  .smd-mb_20 {
    margin-bottom: var(--space-20) !important;
  }
  .smd-ml_20 {
    margin-left: var(--space-20) !important;
  }
  .smd-mr_20 {
    margin-right: var(--space-20) !important;
  }
  .smd-mx_20 {
    margin-left: var(--space-20) !important;
    margin-right: var(--space-20) !important;
  }
  .smd-my_20 {
    margin-top: var(--space-20) !important;
    margin-bottom: var(--space-20) !important;
  }
}

/* Spacing Utilities */
.p-0 {
  padding: 0;
}

.p-12 {
  padding: var(--space-12);
}
.pt-12 {
  padding-top: var(--space-12);
}
.pb-12 {
  padding-bottom: var(--space-12);
}
.pl-12 {
  padding-left: var(--space-12);
}
.pr-12 {
  padding-right: var(--space-12);
}
.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}
.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}
.pt-16 {
  padding-top: var(--space-16);
}
.pb-16 {
  padding-bottom: var(--space-16);
}
.pl-16 {
  padding-left: var(--space-16);
}
.pr-16 {
  padding-right: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}
.pt-20 {
  padding-top: var(--space-20);
}
.pb-20 {
  padding-bottom: var(--space-20);
}
.pl-20 {
  padding-left: var(--space-20);
}
.pr-20 {
  padding-right: var(--space-20);
}
.px-20 {
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}
.py-20 {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.p-24 {
  padding: var(--space-24);
}
.pt-24 {
  padding-top: var(--space-24);
}
.pb-24 {
  padding-bottom: var(--space-24);
}
.pl-24 {
  padding-left: var(--space-24);
}
.pr-24 {
  padding-right: var(--space-24);
}
.px-24 {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}
.py-24 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.p-32 {
  padding: var(--space-32);
}
.pt-32 {
  padding-top: var(--space-32);
}
.pb-32 {
  padding-bottom: var(--space-32);
}
.pl-32 {
  padding-left: var(--space-32);
}
.pr-32 {
  padding-right: var(--space-32);
}
.px-32 {
  padding-left: var(--space-32);
  padding-right: var(--space-32);
}
.py-32 {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.p-40 {
  padding: var(--space-40);
}
.pt-40 {
  padding-top: var(--space-40);
}
.pb-40 {
  padding-bottom: var(--space-40);
}
.pl-40 {
  padding-left: var(--space-40);
}
.pr-40 {
  padding-right: var(--space-40);
}
.px-40 {
  padding-left: var(--space-40);
  padding-right: var(--space-40);
}
.py-40 {
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.p-48 {
  padding: var(--space-48);
}
.pt-48 {
  padding-top: var(--space-48);
}
.pb-48 {
  padding-bottom: var(--space-48);
}
.pl-48 {
  padding-left: var(--space-48);
}
.pr-48 {
  padding-right: var(--space-48);
}
.px-48 {
  padding-left: var(--space-48);
  padding-right: var(--space-48);
}
.py-48 {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.p-56 {
  padding: var(--space-56);
}
.pt-56 {
  padding-top: var(--space-56);
}
.pb-56 {
  padding-bottom: var(--space-56);
}
.pl-56 {
  padding-left: var(--space-56);
}
.pr-56 {
  padding-right: var(--space-56);
}
.px-56 {
  padding-left: var(--space-56);
  padding-right: var(--space-56);
}
.py-56 {
  padding-top: var(--space-56);
  padding-bottom: var(--space-56);
}

.p-64 {
  padding: var(--space-64);
}
.pt-64 {
  padding-top: var(--space-64);
}
.pb-64 {
  padding-bottom: var(--space-64);
}
.pl-64 {
  padding-left: var(--space-64);
}
.pr-64 {
  padding-right: var(--space-64);
}
.px-64 {
  padding-left: var(--space-64);
  padding-right: var(--space-64);
}
.py-64 {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

.p-80 {
  padding: var(--space-80);
}
.pt-80 {
  padding-top: var(--space-80);
}
.pb-80 {
  padding-bottom: var(--space-80);
}
.pl-80 {
  padding-left: var(--space-80);
}
.pr-80 {
  padding-right: var(--space-80);
}
.px-80 {
  padding-left: var(--space-80);
  padding-right: var(--space-80);
}
.py-80 {
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
}

.p-96 {
  padding: var(--space-96);
}
.pt-96 {
  padding-top: var(--space-96);
}
.pb-96 {
  padding-bottom: var(--space-96);
}
.pl-96 {
  padding-left: var(--space-96);
}
.pr-96 {
  padding-right: var(--space-96);
}
.px-96 {
  padding-left: var(--space-96);
  padding-right: var(--space-96);
}
.py-96 {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

.p-112 {
  padding: var(--space-112);
}
.pt-112 {
  padding-top: var(--space-112);
}
.pb-112 {
  padding-bottom: var(--space-112);
}
.pl-112 {
  padding-left: var(--space-112);
}
.pr-112 {
  padding-right: var(--space-112);
}
.px-112 {
  padding-left: var(--space-112);
  padding-right: var(--space-112);
}
.py-112 {
  padding-top: var(--space-112);
  padding-bottom: var(--space-112);
}

.p-128 {
  padding: var(--space-128);
}
.pt-128 {
  padding-top: var(--space-128);
}
.pb-128 {
  padding-bottom: var(--space-128);
}
.pl-128 {
  padding-left: var(--space-128);
}
.pr-128 {
  padding-right: var(--space-128);
}
.px-128 {
  padding-left: var(--space-128);
  padding-right: var(--space-128);
}
.py-128 {
  padding-top: var(--space-128);
  padding-bottom: var(--space-128);
}

.m-0 {
  margin: 0;
}

.m-12 {
  margin: var(--space-12);
}
.mt-12 {
  margin-top: var(--space-12);
}
.mb-12 {
  margin-bottom: var(--space-12);
}
.ml-12 {
  margin-left: var(--space-12);
}
.pr-12 {
  margin-right: var(--space-12);
}
.mx-12 {
  margin-left: var(--space-12);
  margin-right: var(--space-12);
}
.my-12 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

.m-16 {
  margin: var(--space-16);
}
.mt-16 {
  margin-top: var(--space-16);
}
.mb-16 {
  margin-bottom: var(--space-16);
}
.ml-16 {
  margin-left: var(--space-16);
}
.mr-16 {
  margin-right: var(--space-16);
}
.mx-16 {
  margin-left: var(--space-16);
  margin-right: var(--space-16);
}
.my-16 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.m-20 {
  margin: var(--space-20);
}
.mt-20 {
  margin-top: var(--space-20);
}
.mb-20 {
  margin-bottom: var(--space-20);
}
.ml-20 {
  margin-left: var(--space-20);
}
.mr-20 {
  margin-right: var(--space-20);
}
.mx-20 {
  margin-left: var(--space-20);
  margin-right: var(--space-20);
}
.my-20 {
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

.m-24 {
  margin: var(--space-24);
}
.mt-24 {
  margin-top: var(--space-24);
}
.mb-24 {
  margin-bottom: var(--space-24);
}
.ml-24 {
  margin-left: var(--space-24);
}
.mr-24 {
  margin-right: var(--space-24);
}
.mx-24 {
  margin-left: var(--space-24);
  margin-right: var(--space-24);
}
.my-24 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

.m-32 {
  margin: var(--space-32);
}
.mt-32 {
  margin-top: var(--space-32);
}
.mb-32 {
  margin-bottom: var(--space-32);
}
.ml-32 {
  margin-left: var(--space-32);
}
.mr-32 {
  margin-right: var(--space-32);
}
.mx-32 {
  margin-left: var(--space-32);
  margin-right: var(--space-32);
}
.my-32 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.m-40 {
  margin: var(--space-40);
}
.mt-40 {
  margin-top: var(--space-40);
}
.mb-40 {
  margin-bottom: var(--space-40);
}
.ml-40 {
  margin-left: var(--space-40);
}
.mr-40 {
  margin-right: var(--space-40);
}
.mx-40 {
  margin-left: var(--space-40);
  margin-right: var(--space-40);
}
.my-40 {
  margin-top: var(--space-40);
  margin-bottom: var(--space-40);
}

.m-48 {
  margin: var(--space-48);
}
.mt-48 {
  margin-top: var(--space-48);
}
.mb-48 {
  margin-bottom: var(--space-48);
}
.ml-48 {
  margin-left: var(--space-48);
}
.mr-48 {
  margin-right: var(--space-48);
}
.mx-48 {
  margin-left: var(--space-48);
  margin-right: var(--space-48);
}
.my-48 {
  margin-top: var(--space-48);
  margin-bottom: var(--space-48);
}

.m-56 {
  margin: var(--space-56);
}
.mt-56 {
  margin-top: var(--space-56);
}
.mb-56 {
  margin-bottom: var(--space-56);
}
.ml-56 {
  margin-left: var(--space-56);
}
.mr-56 {
  margin-right: var(--space-56);
}
.mx-56 {
  margin-left: var(--space-56);
  margin-right: var(--space-56);
}
.my-56 {
  margin-top: var(--space-56);
  margin-bottom: var(--space-56);
}

.m-64 {
  margin: var(--space-64);
}
.mt-64 {
  margin-top: var(--space-64);
}
.mb-64 {
  margin-bottom: var(--space-64);
}
.ml-64 {
  margin-left: var(--space-64);
}
.mr-64 {
  margin-right: var(--space-64);
}
.mx-64 {
  margin-left: var(--space-64);
  margin-right: var(--space-64);
}
.my-64 {
  margin-top: var(--space-64);
  margin-bottom: var(--space-64);
}

.m-80 {
  margin: var(--space-80);
}
.mt-80 {
  margin-top: var(--space-80);
}
.mb-80 {
  margin-bottom: var(--space-80);
}
.ml-80 {
  margin-left: var(--space-80);
}
.mr-80 {
  margin-right: var(--space-80);
}
.mx-80 {
  margin-left: var(--space-80);
  margin-right: var(--space-80);
}
.my-80 {
  margin-top: var(--space-80);
  margin-bottom: var(--space-80);
}

.m-96 {
  margin: var(--space-96);
}
.mt-96 {
  margin-top: var(--space-96);
}
.mb-96 {
  margin-bottom: var(--space-96);
}
.ml-96 {
  margin-left: var(--space-96);
}
.mr-96 {
  margin-right: var(--space-96);
}
.mx-96 {
  margin-left: var(--space-96);
  margin-right: var(--space-96);
}
.my-96 {
  margin-top: var(--space-96);
  margin-bottom: var(--space-96);
}

.m-112 {
  margin: var(--space-112);
}
.mt-112 {
  margin-top: var(--space-112);
}
.mb-112 {
  margin-bottom: var(--space-112);
}
.ml-112 {
  margin-left: var(--space-112);
}
.mr-112 {
  margin-right: var(--space-112);
}
.mx-112 {
  margin-left: var(--space-112);
  margin-right: var(--space-112);
}
.my-112 {
  margin-top: var(--space-112);
  margin-bottom: var(--space-112);
}

.m-auto,
.m-auto .e-con-inner {
  margin: auto;
}

.m-128 {
  margin: var(--space-128);
}
.mt-128 {
  margin-top: var(--space-128);
}
.mb-128 {
  margin-bottom: var(--space-128);
}
.ml-128 {
  margin-left: var(--space-128);
}
.mr-128 {
  margin-right: var(--space-128);
}
.mx-128 {
  margin-left: var(--space-128);
  margin-right: var(--space-128);
}
.my-128 {
  margin-top: var(--space-128);
  margin-bottom: var(--space-128);
}

.gap-12 {
  gap: var(--space-12);
}
.gap-16 {
  gap: var(--space-16);
}
.gap-20 {
  gap: var(--space-20);
}
.gap-24 {
  gap: var(--space-24);
}
.gap-32 {
  gap: var(--space-32);
}
.gap-40 {
  gap: var(--space-40);
}
.gap-48 {
  gap: var(--space-48);
}
.gap-56 {
  gap: var(--space-56);
}
.gap-64 {
  gap: var(--space-64);
}
.gap-80 {
  gap: var(--space-80);
}
.gap-96 {
  gap: var(--space-96);
}
.gap-112 {
  gap: var(--space-112);
}
.gap-128 {
  gap: var(--space-128);
}

/* 0px */
.radius-0 {
  border-radius: var(--radius-0);
  overflow: hidden;
}
.radius-t-0 {
  border-top-left-radius: var(--radius-0);
  border-top-right-radius: var(--radius-0);
  overflow: hidden;
}
.radius-b-0 {
  border-bottom-left-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  overflow: hidden;
}
.radius-l-0 {
  border-top-left-radius: var(--radius-0);
  border-bottom-left-radius: var(--radius-0);
  overflow: hidden;
}
.radius-r-0 {
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  overflow: hidden;
}

/* 4px */
.radius-4 {
  border-radius: var(--radius-4);
  overflow: hidden;
}
.radius-t-4 {
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
  overflow: hidden;
}
.radius-b-4 {
  border-bottom-left-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  overflow: hidden;
}
.radius-l-4 {
  border-top-left-radius: var(--radius-4);
  border-bottom-left-radius: var(--radius-4);
  overflow: hidden;
}
.radius-r-4 {
  border-top-right-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  overflow: hidden;
}

/* 8px */
.radius-8 {
  border-radius: var(--radius-8);
  overflow: hidden;
}
.radius-t-8 {
  border-top-left-radius: var(--radius-8);
  border-top-right-radius: var(--radius-8);
  overflow: hidden;
}
.radius-b-8 {
  border-bottom-left-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  overflow: hidden;
}
.radius-l-8 {
  border-top-left-radius: var(--radius-8);
  border-bottom-left-radius: var(--radius-8);
  overflow: hidden;
}
.radius-r-8 {
  border-top-right-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  overflow: hidden;
}

/* 12px */
.radius-12 {
  border-radius: var(--radius-12);
  overflow: hidden;
}
.radius-t-12 {
  border-top-left-radius: var(--radius-12);
  border-top-right-radius: var(--radius-12);
  overflow: hidden;
}
.radius-b-12 {
  border-bottom-left-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  overflow: hidden;
}
.radius-l-12 {
  border-top-left-radius: var(--radius-12);
  border-bottom-left-radius: var(--radius-12);
  overflow: hidden;
}
.radius-r-12 {
  border-top-right-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  overflow: hidden;
}

/* 16px */
.radius-16 {
  border-radius: var(--radius-16);
  overflow: hidden;
}
.radius-t-16 {
  border-top-left-radius: var(--radius-16);
  border-top-right-radius: var(--radius-16);
  overflow: hidden;
}
.radius-b-16 {
  border-bottom-left-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  overflow: hidden;
}
.radius-l-16 {
  border-top-left-radius: var(--radius-16);
  border-bottom-left-radius: var(--radius-16);
  overflow: hidden;
}
.radius-r-16 {
  border-top-right-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  overflow: hidden;
}

/* 24px */
.radius-24 {
  border-radius: var(--radius-24);
  overflow: hidden;
}
.radius-t-24 {
  border-top-left-radius: var(--radius-24);
  border-top-right-radius: var(--radius-24);
  overflow: hidden;
}
.radius-b-24 {
  border-bottom-left-radius: var(--radius-24);
  border-bottom-right-radius: var(--radius-24);
  overflow: hidden;
}
.radius-l-24 {
  border-top-left-radius: var(--radius-24);
  border-bottom-left-radius: var(--radius-24);
  overflow: hidden;
}
.radius-r-24 {
  border-top-right-radius: var(--radius-24);
  border-bottom-right-radius: var(--radius-24);
  overflow: hidden;
}

/* 32px */
.radius-32 {
  border-radius: var(--radius-32);
  overflow: hidden;
}
.radius-t-32 {
  border-top-left-radius: var(--radius-32);
  border-top-right-radius: var(--radius-32);
  overflow: hidden;
}
.radius-b-32 {
  border-bottom-left-radius: var(--radius-32);
  border-bottom-right-radius: var(--radius-32);
  overflow: hidden;
}
.radius-l-32 {
  border-top-left-radius: var(--radius-32);
  border-bottom-left-radius: var(--radius-32);
  overflow: hidden;
}
.radius-r-32 {
  border-top-right-radius: var(--radius-32);
  border-bottom-right-radius: var(--radius-32);
  overflow: hidden;
}

/* Full / Circle */
.radius-full {
  border-radius: var(--radius-full);
  overflow: hidden;
}
.radius-pill {
  border-radius: var(--radius-9999);
  overflow: hidden;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}