.container {
  margin: 0 auto;
  max-width: 90%;
}
[class^="all-"],
[class*=" all-"],
[class^="small-"],
[class*=" small-"],
[class^="medium-"],
[class*=" medium-"],
[class^="large-"],
[class*=" large-"],
[class^="larger-"],
[class*=" larger-"],
[class^="largest-"],
[class*=" largest-"] {
  display: grid;
  --gridTC: repeat(1, 1fr);
  grid-template-columns: var(--gridTC);
}
/* Column Expand  */
[class^="span-"],
[class*=" span-"],
[class*="span-"] {
  --gcs: auto/span 1;
  grid-column-end: var(--gcs);
}
.span-1 {
  --gcs: span 1;
}
.span-2 {
  --gcs: span 2;
}
.span-3 {
  --gcs: span 3;
}
.span-4 {
  --gcs: span 4;
}
.span-5 {
  --gcs: span 5;
}
.span-6 {
  --gcs: span 6;
}
.span-7 {
  --gcs: span 7;
}
.span-8 {
  --gcs: span 8;
}
.span-9 {
  --gcs: span 9;
}
.span-10 {
  --gcs: span 10;
}
.span-11 {
  --gcs: span 11;
}
.span-12 {
  --gcs: span 12;
}

/* Offset  */
[class^="offset-"],
[class*=" offset-"],
[class*="offset-"] {
  --gco: 2 / auto;
  grid-column: var(--gco);
  background-color: aqua;
}
.offset-1 {
  --gco: 2 / auto;
}
.offset-2 {
  --gco: 3 / auto;
}
.offset-3 {
  --gco: 4 / auto;
}
.offset-4 {
  --gco: 5 / auto;
}
.offset-5 {
  --gco: 6 / auto;
}

/* Column Gap  */
[class^="gap-"],
[class*=" gap-"],
[class^="small-gap-"],
[class*=" small-gap-"],
[class^="medium-gap-"],
[class*=" medium-gap-"],
[class^="large-gap-"],
[class*=" large-gap-"],
[class^="larger-gap-"],
[class*=" larger-gap-"],
[class^="largest-gap-"],
[class*=" largest-gap-"] {
  --gg: 0;
  gap: var(--gg);
}
.gap-1 {
  --gg: 1rem;
}
.gap-2 {
  --gg: 2rem;
}
.gap-3 {
  --gg: 3rem;
}
.gap-4 {
  --gg: 4rem;
}
.gap-5 {
  --gg: 5rem;
}

/* ORDER  */
[class^="order-"],
[class*=" order-"],
[class^="small-order-"],
[class*=" small-order-"],
[class^="medium-order-"],
[class*=" medium-order-"],
[class^="large-order-"],
[class*=" large-order-"],
[class^="larger-order-"],
[class*=" larger-order-"],
[class^="largest-order-"],
[class*=" largest-order-"] {
  --order: 0;
  order: var(--order);
}
/* order classes */
.order-0 {
  --order: 0;
}
.order-1 {
  --order: 1;
}
.order-2 {
  --order: 2;
}

/* margin all  */
[class^="m-"],
[class*=" m-"],
[class^="small-m-"],
[class*=" small-m-"],
[class^="medium-m-"],
[class*=" medium-m-"],
[class^="large-m-"],
[class*=" large-m-"],
[class^="larger-m-"],
[class*=" larger-m-"],
[class^="largest-m-"],
[class*=" largest-m-"] {
  --mm: 1rem; /* Default margin */
  margin: var(--mm);
}

.m-1 {
  --mm: 1rem;
}
.m-2 {
  --mm: 2rem;
}
.m-3 {
  --mm: 3rem;
}
.m-4 {
  --mm: 4rem;
}
.m-5 {
  --mm: 5rem;
}

[class^="mx-"],
[class*=" mx-"],
[class^="small-mx-"],
[class*=" small-mx-"],
[class^="medium-mx-"],
[class*=" medium-mx-"],
[class^="large-mx-"],
[class*=" large-mx-"],
[class^="larger-mx-"],
[class*=" larger-mx-"],
[class^="largest-mx-"],
[class*=" largest-mx-"] {
  --mx: 0px 1rem; /* Default margin */
  margin: var(--mx);
}
/* Margin Left-right */
.mx-1 {
  --mx: 0px 1rem;
}
.mx-2 {
  --mx: 0px 2rem;
}
.mx-3 {
  --mx: 0px 3rem;
}
.mx-4 {
  --mx: 0px 4rem;
}
.mx-5 {
  --mx: 0px 5rem;
}

[class^="my-"],
[class*=" my-"],
[class^="small-my-"],
[class*=" small-my-"],
[class^="medium-my-"],
[class*=" medium-my-"],
[class^="large-my-"],
[class*=" large-my-"],
[class^="larger-my-"],
[class*=" larger-my-"],
[class^="largest-my-"],
[class*=" largest-my-"] {
  --my: 1rem auto; /* Default margin */
  margin: var(--my);
}
/* Margin top-bottom */
.my-1 {
  --my: 1rem auto;
}
.my-2 {
  --my: 2rem auto;
}
.my-3 {
  --my: 3rem auto;
}
.my-4 {
  --my: 4rem auto;
}
.my-5 {
  --my: 5rem auto;
}

/* -------margin-top --------- */
[class^="mt-"],
[class*=" mt-"],
[class^="small-mt-"],
[class*=" small-mt-"],
[class^="medium-mt-"],
[class*=" medium-mt-"],
[class^="large-mt-"],
[class*=" large-mt-"],
[class^="larger-mt-"],
[class*=" larger-mt-"],
[class^="largest-mt-"],
[class*=" largest-mt-"] {
  --mt: 1rem; /* Default margin */
  margin-top: var(--mt);
}
/* Margin top */
.mt-1 {
  --mt: 1rem;
}
.mt-2 {
  --mt: 2rem;
}
.mt-3 {
  --mt: 3rem;
}
.mt-4 {
  --mt: 4rem;
}
.mt-5 {
  --mt: 5rem;
}

/* -------margin-bottom --------- */
[class^="mb-"],
[class*=" mb-"],
[class^="small-mb-"],
[class*=" small-mb-"],
[class^="medium-mb-"],
[class*=" medium-mb-"],
[class^="large-mb-"],
[class*=" large-mb-"],
[class^="larger-mb-"],
[class*=" larger-mb-"],
[class^="largest-mb-"],
[class*=" largest-mb-"] {
  --mb: 1rem; /* Default margin */
  margin-bottom: var(--mb);
}
/* Margin bottom */
.mb-1 {
  --mb: 1rem;
}
.mb-2 {
  --mb: 2rem;
}
.mb-3 {
  --mb: 3rem;
}
.mb-4 {
  --mb: 4rem;
}
.mb-5 {
  --mb: 5rem;
}

/*--------- margin-left ---------- */
[class^="ml-"],
[class*=" ml-"],
[class^="small-ml-"],
[class*=" small-ml-"],
[class^="medium-ml-"],
[class*=" medium-ml-"],
[class^="large-ml-"],
[class*=" large-ml-"],
[class^="larger-ml-"],
[class*=" larger-ml-"],
[class^="largest-ml-"],
[class*=" largest-ml-"] {
  --ml: 1rem; /* Default margin */
  margin-left: var(--ml);
}
/* Margin left */
.ml-1 {
  --ml: 1rem;
}
.ml-2 {
  --ml: 2rem;
}
.ml-3 {
  --ml: 3rem;
}
.ml-4 {
  --ml: 4rem;
}
.ml-5 {
  --ml: 5rem;
}

/*--------- margin-right ---------- */
[class^="mr-"],
[class*=" mr-"],
[class^="small-mr-"],
[class*=" small-mr-"],
[class^="medium-mr-"],
[class*=" medium-mr-"],
[class^="large-mr-"],
[class*=" large-mr-"],
[class^="larger-mr-"],
[class*=" larger-mr-"],
[class^="largest-mr-"],
[class*=" largest-mr-"] {
  --mr: 1rem; /* Default margin */
  margin-right: var(--mr);
}
/* Margin right */
.mr-1 {
  --mr: 1rem;
}
.mr-2 {
  --mr: 2rem;
}
.mr-3 {
  --mr: 3rem;
}
.mr-4 {
  --mr: 4rem;
}
.mr-5 {
  --mr: 5rem;
}

/* ---------padding all-----------------  */
[class^="p-"],
[class*=" p-"],
[class^="small-p-"],
[class*=" small-p-"],
[class^="medium-p-"],
[class*=" medium-p-"],
[class^="large-p-"],
[class*=" large-p-"],
[class^="larger-p-"],
[class*=" larger-p-"],
[class^="largest-p-"],
[class*=" largest-p-"] {
  --pd: 1rem; /* Default padding */
  padding: var(--pd);
}
/* padding all  */
.p-1 {
  --pd: 1rem;
}
.p-2 {
  --pd: 2rem;
}
.p-3 {
  --pd: 3rem;
}
.p-4 {
  --pd: 4rem;
}
.p-5 {
  --pd: 5rem;
}
/*------------ padding left-right --------- */
[class^="px-"],
[class*=" px-"],
[class^="small-px-"],
[class*=" small-px-"],
[class^="medium-px-"],
[class*=" medium-px-"],
[class^="large-px-"],
[class*=" large-px-"],
[class^="larger-px-"],
[class*=" larger-px-"],
[class^="largest-px-"],
[class*=" largest-px-"] {
  --px: 0px 1rem; /* Default Padding */
  padding: var(--px);
}
/* Paddding Left-right */
.px-1 {
  --px: 0px 1rem;
}
.px-2 {
  --px: 0px 2rem;
}
.px-3 {
  --px: 0px 3rem;
}
.px-4 {
  --px: 0px 4rem;
}
.px-5 {
  --px: 0px 5rem;
}

/*-------- padding top-bottom ------- */
[class^="py-"],
[class*=" py-"],
[class^="small-py-"],
[class*=" small-py-"],
[class^="medium-py-"],
[class*=" medium-py-"],
[class^="large-py-"],
[class*=" large-py-"],
[class^="larger-py-"],
[class*=" larger-py-"],
[class^="largest-py-"],
[class*=" largest-py-"] {
  --py: 1rem auto; /* Default padding */
  padding: var(--py);
}
/* Padding top-bottom */
.py-1 {
  --py: 1rem 0;
}
.py-2 {
  --py: 2rem 0;
}
.py-3 {
  --py: 3rem 0;
}
.py-4 {
  --py: 4rem 0;
}
.py-5 {
  --py: 5rem 0;
}

/* -------padding-top --------- */
[class^="pt-"],
[class*=" pt-"],
[class^="small-pt-"],
[class*=" small-pt-"],
[class^="medium-pt-"],
[class*=" medium-pt-"],
[class^="large-pt-"],
[class*=" large-pt-"],
[class^="larger-pt-"],
[class*=" larger-pt-"],
[class^="largest-pt-"],
[class*=" largest-pt-"] {
  --pt: 1rem; /* Default padding */
  padding-top: var(--pt);
}
/* Padding top */
.pt-1 {
  --pt: 1rem;
}
.pt-2 {
  --pt: 2rem;
}
.pt-3 {
  --pt: 3rem;
}
.pt-4 {
  --pt: 4rem;
}
.pt-5 {
  --pt: 5rem;
}

/* -------Padding-bottom --------- */
[class^="pb-"],
[class*=" pb-"],
[class^="small-pb-"],
[class*=" small-pb-"],
[class^="medium-pb-"],
[class*=" medium-pb-"],
[class^="large-pb-"],
[class*=" large-pb-"],
[class^="larger-pb-"],
[class*=" larger-pb-"],
[class^="largest-pb-"],
[class*=" largest-pb-"] {
  --pb: 1rem; /* Default Padding */
  padding-bottom: var(--pb);
}
/* Padding bottom */
.pb-1 {
  --pb: 1rem;
}
.pb-2 {
  --pb: 2rem;
}
.pb-3 {
  --pb: 3rem;
}
.pb-4 {
  --pb: 4rem;
}
.pb-5 {
  --pb: 5rem;
}

/*--------- Padding-left ---------- */
[class^="pl-"],
[class*=" pl-"],
[class^="small-pl-"],
[class*=" small-pl-"],
[class^="medium-pl-"],
[class*=" medium-pl-"],
[class^="large-pl-"],
[class*=" large-pl-"],
[class^="larger-pl-"],
[class*=" larger-pl-"],
[class^="largest-pl-"],
[class*=" largest-pl-"] {
  --pl: 1rem; /* Default Padding */
  padding-left: var(--pl);
}
/* Padding left */
.pl-1 {
  --pl: 1rem;
}
.pl-2 {
  --pl: 2rem;
}
.pl-3 {
  --pl: 3rem;
}
.pl-4 {
  --pl: 4rem;
}
.pl-5 {
  --pl: 5rem;
}

/*--------- Padding-right ---------- */
[class^="pr-"],
[class*=" pr-"],
[class^="small-pr-"],
[class*=" small-pr-"],
[class^="medium-pr-"],
[class*=" medium-pr-"],
[class^="large-pr-"],
[class*=" large-pr-"],
[class^="larger-pr-"],
[class*=" larger-pr-"],
[class^="largest-pr-"],
[class*=" largest-pr-"] {
  --pr: 1rem; /* Default Padding */
  padding-right: var(--pr);
}
/* Margin right */
.pr-1 {
  --pr: 1rem;
}
.pr-2 {
  --pr: 2rem;
}
.pr-3 {
  --pr: 3rem;
}
.pr-4 {
  --pr: 4rem;
}
.pr-5 {
  --pr: 5rem;
}

.d-block {
  display: block !important;
  width: 100%;
}
/* ======== image-responsive ======== */
.width-full {
  width: 100%;
}
.height-full {
  height: 100%;
}
.relative {
  position: relative;
}
/* Form  */
input,
select,
button,
textarea,
.button {
  border: 1px solid;
  /* color: white; */
  background-color: transparent;
  width: calc(100% - 1.5rem);
  padding: 0.75rem;
  margin: 10px 0;
}
select {
  width: 100% !important;
}
button,
input[type="submit"],
.button {
  width: auto;
  cursor: pointer;
}
/* All  */
.all-1 {
  --gridTC: repeat(1, 1fr);
}
.all-2 {
  --gridTC: repeat(2, 1fr);
}
.all-3 {
  --gridTC: repeat(3, 1fr);
}
.all-4 {
  --gridTC: repeat(4, 1fr);
}
.all-5 {
  --gridTC: repeat(5, 1fr);
}
.all-6 {
  --gridTC: repeat(6, 1fr);
}
.all-7 {
  --gridTC: repeat(7, 1fr);
}
.all-8 {
  --gridTC: repeat(8, 1fr);
}
.all-9 {
  --gridTC: repeat(9, 1fr);
}
.all-10 {
  --gridTC: repeat(10, 1fr);
}
.all-11 {
  --gridTC: repeat(11, 1fr);
}
.all-12 {
  --gridTC: repeat(12, 1fr);
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  /* Grid */
  .small-1 {
    --gridTC: repeat(1, 1fr);
  }
  .small-2 {
    --gridTC: repeat(2, 1fr);
  }
  .small-3 {
    --gridTC: repeat(3, 1fr);
  }
  .small-4 {
    --gridTC: repeat(4, 1fr);
  }
  .small-5 {
    --gridTC: repeat(5, 1fr);
  }
  .small-6 {
    --gridTC: repeat(6, 1fr);
  }
  .small-7 {
    --gridTC: repeat(7, 1fr);
  }
  .small-8 {
    --gridTC: repeat(8, 1fr);
  }
  .small-9 {
    --gridTC: repeat(9, 1fr);
  }
  .small-10 {
    --gridTC: repeat(10, 1fr);
  }
  .small-11 {
    --gridTC: repeat(11, 1fr);
  }
  .small-12 {
    --gridTC: repeat(12, 1fr);
  }
  /* Expand */
  .small-span-1 {
    --gcs: span 1;
  }
  .small-span-2 {
    --gcs: span 2;
  }
  .small-span-3 {
    --gcs: span 3;
  }
  .small-span-4 {
    --gcs: span 4;
  }
  .small-span-5 {
    --gcs: span 5;
  }
  .small-span-6 {
    --gcs: span 6;
  }
  .small-span-7 {
    --gcs: span 7;
  }
  .small-span-8 {
    --gcs: span 8;
  }
  .small-span-9 {
    --gcs: span 9;
  }
  .small-span-10 {
    --gcs: span 10;
  }
  .small-span-11 {
    --gcs: span 11;
  }
  .small-span-12 {
    --gcs: span 12;
  }
  /* gap  */
  .small-gap-1 {
    --gg: 1rem;
  }
  .small-gap-2 {
    --gg: 2rem;
  }
  .small-gap-3 {
    --gg: 3rem;
  }
  .small-gap-4 {
    --gg: 4rem;
  }
  .small-gap-5 {
    --gg: 5rem;
  }
  /* order classes */
  .small-order-0 {
    --order: 0;
  }
  .small-order-1 {
    --order: 1;
  }
  .small-order-2 {
    --order: 2;
  }
  /* margin all  */
  .small-m-1 {
    --mm: 1rem;
  }
  .small-m-2 {
    --mm: 2rem;
  }
  .small-m-3 {
    --mm: 3rem;
  }
  .small-m-4 {
    --mm: 4rem;
  }
  .small-m-5 {
    --mm: 5rem;
  }
  /* margin left-right  */
  .small-mx-1 {
    --mx: 0px 1rem;
  }
  .small-mx-2 {
    --mx: 0px 2rem;
  }
  .small-mx-3 {
    --mx: 0px 3rem;
  }
  .small-mx-4 {
    --mx: 0px 4rem;
  }
  .small-mx-5 {
    --mx: 0px 5rem;
  }
  /* margin top-bottom  */
  .small-my-1 {
    --my: 1rem auto;
  }
  .small-my-2 {
    --my: 2rem auto;
  }
  .small-my-3 {
    --my: 3rem auto;
  }
  .small-my-4 {
    --my: 4rem auto;
  }
  .small-my-5 {
    --my: 5rem auto;
  }
  /* margin top  */
  .small-mt-1 {
    --mt: 1rem;
  }
  .small-mt-2 {
    --mt: 2rem;
  }
  .small-mt-3 {
    --mt: 3rem;
  }
  .small-mt-4 {
    --mt: 4rem;
  }
  .small-mt-5 {
    --mt: 5rem;
  }
  /* margin-bottom  */
  .small-mb-1 {
    --mb: 1rem;
  }
  .small-mb-2 {
    --mb: 2rem;
  }
  .small-mb-3 {
    --mb: 3rem;
  }
  .small-mb-4 {
    --mb: 4rem;
  }
  .small-mb-5 {
    --mb: 5rem;
  }
  /* margin left  */
  .small-ml-1 {
    --ml: 1rem;
  }
  .small-ml-2 {
    --ml: 2rem;
  }
  .small-ml-3 {
    --ml: 3rem;
  }
  .small-ml-4 {
    --ml: 4rem;
  }
  .small-ml-5 {
    --ml: 5rem;
  }
  /* margin right  */
  .small-mr-1 {
    --mr: 1rem;
  }
  .small-mr-2 {
    --mr: 2rem;
  }
  .small-mr-3 {
    --mr: 3rem;
  }
  .small-mr-4 {
    --mr: 4rem;
  }
  .small-mr-5 {
    --mr: 5rem;
  }
  /* padding all  */
  .small-p-1 {
    --pd: 1rem;
  }
  .small-p-2 {
    --pd: 2rem;
  }
  .small-p-3 {
    --pd: 3rem;
  }
  .small-p-4 {
    --pd: 4rem;
  }
  .small-p-5 {
    --pd: 5rem;
  }
  /* padding left-right  */
  .small-px-1 {
    --px: 0px 1rem;
  }
  .small-px-2 {
    --px: 0px 2rem;
  }
  .small-px-3 {
    --px: 0px 3rem;
  }
  .small-px-4 {
    --px: 0px 4rem;
  }
  .small-px-5 {
    --px: 0px 5rem;
  }
  /* padding top-bottom  */
  .small-py-1 {
    --py: 1rem 0;
  }
  .small-py-2 {
    --py: 2rem 0;
  }
  .small-py-3 {
    --py: 3rem 0;
  }
  .small-py-4 {
    --py: 4rem 0;
  }
  .small-py-5 {
    --py: 5rem 0;
  }
  /* padding top  */
  .small-pt-1 {
    --pt: 1rem;
  }
  .small-pt-2 {
    --pt: 2rem;
  }
  .small-pt-3 {
    --pt: 3rem;
  }
  .small-pt-4 {
    --pt: 4rem;
  }
  .small-pt-5 {
    --pt: 5rem;
  }
  /* padding bottom  */
  .small-pb-1 {
    --pb: 1rem;
  }
  .small-pb-2 {
    --pb: 2rem;
  }
  .small-pb-3 {
    --pb: 3rem;
  }
  .small-pb-4 {
    --pb: 4rem;
  }
  .small-pb-5 {
    --pb: 5rem;
  }
  /* padding left  */
  .small-pl-1 {
    --pl: 1rem;
  }
  .small-pl-2 {
    --pl: 2rem;
  }
  .small-pl-3 {
    --pl: 3rem;
  }
  .small-pl-4 {
    --pl: 4rem;
  }
  .small-pl-5 {
    --pl: 5rem;
  }
  /* padding right  */
  .small-pr-1 {
    --pr: 1rem;
  }
  .small-pr-2 {
    --pr: 2rem;
  }
  .small-pr-3 {
    --pr: 3rem;
  }
  .small-pr-4 {
    --pr: 4rem;
  }
  .small-pr-5 {
    --pr: 5rem;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .medium-1 {
    --gridTC: repeat(1, 1fr);
  }
  .medium-2 {
    --gridTC: repeat(2, 1fr);
  }
  .medium-3 {
    --gridTC: repeat(3, 1fr);
  }
  .medium-4 {
    --gridTC: repeat(4, 1fr);
  }
  .medium-5 {
    --gridTC: repeat(5, 1fr);
  }
  .medium-6 {
    --gridTC: repeat(6, 1fr);
  }
  .medium-7 {
    --gridTC: repeat(7, 1fr);
  }
  .medium-8 {
    --gridTC: repeat(8, 1fr);
  }
  .medium-9 {
    --gridTC: repeat(9, 1fr);
  }
  .medium-10 {
    --gridTC: repeat(10, 1fr);
  }
  .medium-11 {
    --gridTC: repeat(11, 1fr);
  }
  .medium-12 {
    --gridTC: repeat(12, 1fr);
  }
  /* Expand */
  .medium-span-1 {
    --gcs: span 1;
  }
  .medium-span-2 {
    --gcs: span 2;
  }
  .medium-span-3 {
    --gcs: span 3;
  }
  .medium-span-4 {
    --gcs: span 4;
  }
  .medium-span-5 {
    --gcs: span 5;
  }
  .medium-span-6 {
    --gcs: span 6;
  }
  .medium-span-7 {
    --gcs: span 7;
  }
  .medium-span-8 {
    --gcs: span 8;
  }
  .medium-span-9 {
    --gcs: span 9;
  }
  .medium-span-10 {
    --gcs: span 10;
  }
  .medium-span-11 {
    --gcs: span 11;
  }
  .medium-span-12 {
    --gcs: span 12;
  }
  .medium-gap-1 {
    --gg: 1rem;
  }
  .medium-gap-2 {
    --gg: 2rem;
  }
  .medium-gap-3 {
    --gg: 3rem;
  }
  .medium-gap-4 {
    --gg: 4rem;
  }
  .medium-gap-5 {
    --gg: 5rem;
  }
  /* order classes */
.medium-order-0 { --order: 0; }
.medium-order-1 { --order: 1; }
.medium-order-2 { --order: 2; }
  /* margin all  */
  .medium-m-1 {
    --mm: 1rem;
  }
  .medium-m-2 {
    --mm: 2rem;
  }
  .medium-m-3 {
    --mm: 3rem;
  }
  .medium-m-4 {
    --mm: 4rem;
  }
  .medium-m-5 {
    --mm: 5rem;
  }
  /* margin left-right  */
  .medium-mx-1 {
    --mx: 0px 1rem;
  }
  .medium-mx-2 {
    --mx: 0px 2rem;
  }
  .medium-mx-3 {
    --mx: 0px 3rem;
  }
  .medium-mx-4 {
    --mx: 0px 4rem;
  }
  .medium-mx-5 {
    --mx: 0px 5rem;
  }
  /* margin top-bottom  */
  .medium-my-1 {
    --my: 1rem auto;
  }
  .medium-my-2 {
    --my: 2rem auto;
  }
  .medium-my-3 {
    --my: 3rem auto;
  }
  .medium-my-4 {
    --my: 4rem auto;
  }
  .medium-my-5 {
    --my: 5rem auto;
  }
  /* margin top  */
  .medium-mt-1 {
    --mt: 1rem;
  }
  .medium-mt-2 {
    --mt: 2rem;
  }
  .medium-mt-3 {
    --mt: 3rem;
  }
  .medium-mt-4 {
    --mt: 4rem;
  }
  .medium-mt-5 {
    --mt: 5rem;
  }
  /* margin bottom  */
  .medium-mb-1 {
    --mb: 1rem;
  }
  .medium-mb-2 {
    --mb: 2rem;
  }
  .medium-mb-3 {
    --mb: 3rem;
  }
  .medium-mb-4 {
    --mb: 4rem;
  }
  .medium-mb-5 {
    --mb: 5rem;
  }
  /* margin-left  */
  .medium-ml-1 {
    --ml: 1rem;
  }
  .medium-ml-2 {
    --ml: 2rem;
  }
  .medium-ml-3 {
    --ml: 3rem;
  }
  .medium-ml-4 {
    --ml: 4rem;
  }
  .medium-ml-5 {
    --ml: 5rem;
  }
  /* margin right  */
  .medium-mr-1 {
    --mr: 1rem;
  }
  .medium-mr-2 {
    --mr: 2rem;
  }
  .medium-mr-3 {
    --mr: 3rem;
  }
  .medium-mr-4 {
    --mr: 4rem;
  }
  .medium-mr-5 {
    --mr: 5rem;
  }
  /* padding all  */
  .medium-p-1 {
    --pd: 1rem;
  }
  .medium-p-2 {
    --pd: 2rem;
  }
  .medium-p-3 {
    --pd: 3rem;
  }
  .medium-p-4 {
    --pd: 4rem;
  }
  .medium-p-5 {
    --pd: 5rem;
  }
  /* padding left-right  */
  .medium-px-1 {
    --px: 0px 1rem;
  }
  .medium-px-2 {
    --px: 0px 2rem;
  }
  .medium-px-3 {
    --px: 0px 3rem;
  }
  .medium-px-4 {
    --px: 0px 4rem;
  }
  .medium-px-5 {
    --px: 0px 5rem;
  }
  /* padding top-bottom  */
  .medium-py-1 {
    --py: 1rem 0;
  }
  .medium-py-2 {
    --py: 2rem 0;
  }
  .medium-py-3 {
    --py: 3rem 0;
  }
  .medium-py-4 {
    --py: 4rem 0;
  }
  .medium-py-5 {
    --py: 5rem 0;
  }
  /* padding top  */
  .medium-pt-1 {
    --pt: 1rem;
  }
  .medium-pt-2 {
    --pt: 2rem;
  }
  .medium-pt-3 {
    --pt: 3rem;
  }
  .medium-pt-4 {
    --pt: 4rem;
  }
  .medium-pt-5 {
    --pt: 5rem;
  }
  /* padding bottom  */
  .medium-pb-1 {
    --pb: 1rem;
  }
  .medium-pb-2 {
    --pb: 2rem;
  }
  .medium-pb-3 {
    --pb: 3rem;
  }
  .medium-pb-4 {
    --pb: 4rem;
  }
  .medium-pb-5 {
    --pb: 5rem;
  }
  /* padding left  */
  .medium-pl-1 {
    --pl: 1rem;
  }
  .medium-pl-2 {
    --pl: 2rem;
  }
  .medium-pl-3 {
    --pl: 3rem;
  }
  .medium-pl-4 {
    --pl: 4rem;
  }
  .medium-pl-5 {
    --pl: 5rem;
  }
  /* padding right  */
  .medium-pr-1 {
    --pr: 1rem;
  }
  .medium-pr-2 {
    --pr: 2rem;
  }
  .medium-pr-3 {
    --pr: 3rem;
  }
  .medium-pr-4 {
    --pr: 4rem;
  }
  .medium-pr-5 {
    --pr: 5rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
  /* Grid */
  .large-1 {
    --gridTC: repeat(1, 1fr);
  }
  .large-2 {
    --gridTC: repeat(2, 1fr);
  }
  .large-3 {
    --gridTC: repeat(3, 1fr);
  }
  .large-4 {
    --gridTC: repeat(4, 1fr);
  }
  .large-5 {
    --gridTC: repeat(5, 1fr);
  }
  .large-6 {
    --gridTC: repeat(6, 1fr);
  }
  .large-7 {
    --gridTC: repeat(7, 1fr);
  }
  .large-8 {
    --gridTC: repeat(8, 1fr);
  }
  .large-9 {
    --gridTC: repeat(9, 1fr);
  }
  .large-10 {
    --gridTC: repeat(10, 1fr);
  }
  .large-11 {
    --gridTC: repeat(11, 1fr);
  }
  .large-12 {
    --gridTC: repeat(12, 1fr);
  }
  /* Expand */
  .large-span-1 {
    --gcs: span 1;
  }
  .large-span-2 {
    --gcs: span 2;
  }
  .large-span-3 {
    --gcs: span 3;
  }
  .large-span-4 {
    --gcs: span 4;
  }
  .large-span-5 {
    --gcs: span 5;
  }
  .large-span-6 {
    --gcs: span 6;
  }
  .large-span-7 {
    --gcs: span 7;
  }
  .large-span-8 {
    --gcs: span 8;
  }
  .large-span-9 {
    --gcs: span 9;
  }
  .large-span-10 {
    --gcs: span 10;
  }
  .large-span-11 {
    --gcs: span 11;
  }
  .large-span-12 {
    --gcs: span 12;
  }
  /* gap  */
  .large-gap-1 {
    --gg: 1rem;
  }
  .large-gap-2 {
    --gg: 2rem;
  }
  .large-gap-3 {
    --gg: 3rem;
  }
  .large-gap-4 {
    --gg: 4rem;
  }
  .large-gap-5 {
    --gg: 5rem;
  }
  /* order classes */
.large-order-0 { --order: 0; }
.large-order-1 { --order: 1; }
.large-order-2 { --order: 2; }
  /* margin all 	 */
  .large-m-1 {
    --mm: 1rem;
  }
  .large-m-2 {
    --mm: 2rem;
  }
  .large-m-3 {
    --mm: 3rem;
  }
  .large-m-4 {
    --mm: 4rem;
  }
  .large-m-5 {
    --mm: 5rem;
  }
  /* margin left-right  */
  .large-mx-1 {
    --mx: 0px 1rem;
  }
  .large-mx-2 {
    --mx: 0px 2rem;
  }
  .large-mx-3 {
    --mx: 0px 3rem;
  }
  .large-mx-4 {
    --mx: 0px 4rem;
  }
  .large-mx-5 {
    --mx: 0px 5rem;
  }
  /* margin top-bottom  */
  .large-my-1 {
    --my: 1rem auto;
  }
  .large-my-2 {
    --my: 2rem auto;
  }
  .large-my-3 {
    --my: 3rem auto;
  }
  .large-my-4 {
    --my: 4rem auto;
  }
  .large-my-5 {
    --my: 5rem auto;
  }
  /* margin top  */
  .large-mt-1 {
    --mt: 1rem;
  }
  .large-mt-2 {
    --mt: 2rem;
  }
  .large-mt-3 {
    --mt: 3rem;
  }
  .large-mt-4 {
    --mt: 4rem;
  }
  .large-mt-5 {
    --mt: 5rem;
  }
  /* margin-bttom  */
  .large-mb-1 {
    --mb: 1rem;
  }
  .large-mb-2 {
    --mb: 2rem;
  }
  .large-mb-3 {
    --mb: 3rem;
  }
  .large-mb-4 {
    --mb: 4rem;
  }
  .large-mb-5 {
    --mb: 5rem;
  }
  /* margin left  */
  .large-ml-1 {
    --ml: 1rem;
  }
  .large-ml-2 {
    --ml: 2rem;
  }
  .large-ml-3 {
    --ml: 3rem;
  }
  .large-ml-4 {
    --ml: 4rem;
  }
  .large-ml-5 {
    --ml: 5rem;
  }
  /* margin right  */
  .large-mr-1 {
    --mr: 1rem;
  }
  .large-mr-2 {
    --mr: 2rem;
  }
  .large-mr-3 {
    --mr: 3rem;
  }
  .large-mr-4 {
    --mr: 4rem;
  }
  .large-mr-5 {
    --mr: 5rem;
  }
  /* padding all  */
  .large-p-1 {
    --pd: 1rem;
  }
  .large-p-2 {
    --pd: 2rem;
  }
  .large-p-3 {
    --pd: 3rem;
  }
  .large-p-4 {
    --pd: 4rem;
  }
  .large-p-5 {
    --pd: 5rem;
  }
  /* padding left right  */
  .large-px-1 {
    --px: 0px 1rem;
  }
  .large-px-2 {
    --px: 0px 2rem;
  }
  .large-px-3 {
    --px: 0px 3rem;
  }
  .large-px-4 {
    --px: 0px 4rem;
  }
  .large-px-5 {
    --px: 0px 5rem;
  }
  /* padding top-bottom  */
  .large-py-1 {
    --py: 1rem 0;
  }
  .large-py-2 {
    --py: 2rem 0;
  }
  .large-py-3 {
    --py: 3rem 0;
  }
  .large-py-4 {
    --py: 4rem 0;
  }
  .large-py-5 {
    --py: 5rem 0;
  }
  /* padding topp  */
  .large-pt-1 {
    --pt: 1rem;
  }
  .large-pt-2 {
    --pt: 2rem;
  }
  .large-pt-3 {
    --pt: 3rem;
  }
  .large-pt-4 {
    --pt: 4rem;
  }
  .large-pt-5 {
    --pt: 5rem;
  }
  /* padding bottom  */
  .large-pb-1 {
    --pb: 1rem;
  }
  .large-pb-2 {
    --pb: 2rem;
  }
  .large-pb-3 {
    --pb: 3rem;
  }
  .large-pb-4 {
    --pb: 4rem;
  }
  .large-pb-5 {
    --pb: 5rem;
  }
  /* padding left  */
  .larger-pl-1 {
    --pl: 1rem;
  }
  .larger-pl-2 {
    --pl: 2rem;
  }
  .larger-pl-3 {
    --pl: 3rem;
  }
  .larger-pl-4 {
    --pl: 4rem;
  }
  .larger-pl-5 {
    --pl: 5rem;
  }
  /* padding right  */
  .larger-pr-1 {
    --pr: 1rem;
  }
  .larger-pr-2 {
    --pr: 2rem;
  }
  .larger-pr-3 {
    --pr: 3rem;
  }
  .larger-pr-4 {
    --pr: 4rem;
  }
  .larger-pr-5 {
    --pr: 5rem;
  }
}
/* Larger devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  /* Grid */
  .larger-1 {
    --gridTC: repeat(1, 1fr);
  }
  .larger-2 {
    --gridTC: repeat(2, 1fr);
  }
  .larger-3 {
    --gridTC: repeat(3, 1fr);
  }
  .larger-4 {
    --gridTC: repeat(4, 1fr);
  }
  .larger-5 {
    --gridTC: repeat(5, 1fr);
  }
  .larger-6 {
    --gridTC: repeat(6, 1fr);
  }
  .larger-7 {
    --gridTC: repeat(7, 1fr);
  }
  .larger-8 {
    --gridTC: repeat(8, 1fr);
  }
  .larger-9 {
    --gridTC: repeat(9, 1fr);
  }
  .larger-10 {
    --gridTC: repeat(10, 1fr);
  }
  .larger-11 {
    --gridTC: repeat(11, 1fr);
  }
  .larger-12 {
    --gridTC: repeat(12, 1fr);
  }
  /* Expand */
  .larger-span-1 {
    --gcs: span 1;
  }
  .larger-span-2 {
    --gcs: span 2;
  }
  .larger-span-3 {
    --gcs: span 3;
  }
  .larger-span-4 {
    --gcs: span 4;
  }
  .larger-span-5 {
    --gcs: span 5;
  }
  .larger-span-6 {
    --gcs: span 6;
  }
  .larger-span-7 {
    --gcs: span 7;
  }
  .larger-span-8 {
    --gcs: span 8;
  }
  .larger-span-9 {
    --gcs: span 9;
  }
  .larger-span-10 {
    --gcs: span 10;
  }
  .larger-span-11 {
    --gcs: span 11;
  }
  .larger-span-12 {
    --gcs: span 12;
  }
  /* gap  */
  .larger-gap-1 {
    --gg: 1rem;
  }
  .larger-gap-2 {
    --gg: 2rem;
  }
  .larger-gap-3 {
    --gg: 3rem;
  }
  .larger-gap-4 {
    --gg: 4rem;
  }
  .larger-gap-5 {
    --gg: 5rem;
  }
  /* order classes */
.larger-order-0 { --order: 0; }
.larger-order-1 { --order: 1; }
.larger-order-2 { --order: 2; }
  /* margin all  */
  .larger-m-1 {
    --mm: 1rem;
  }
  .larger-m-2 {
    --mm: 2rem;
  }
  .larger-m-3 {
    --mm: 3rem;
  }
  .larger-m-4 {
    --mm: 4rem;
  }
  .larger-m-5 {
    --mm: 5rem;
  }
  /* margin left-right  */
  .larger-mx-1 {
    --mx: 0px 1rem;
  }
  .larger-mx-2 {
    --mx: 0px 2rem;
  }
  .larger-mx-3 {
    --mx: 0px 3rem;
  }
  .larger-mx-4 {
    --mx: 0px 4rem;
  }
  .larger-mx-5 {
    --mx: 0px 5rem;
  }
  /* margin top-bottom  */
  .larger-my-1 {
    --my: 1rem auto;
  }
  .larger-my-2 {
    --my: 2rem auto;
  }
  .larger-my-3 {
    --my: 3rem auto;
  }
  .larger-my-4 {
    --my: 4rem auto;
  }
  .larger-my-5 {
    --my: 5rem auto;
  }
  /* margin-top  */
  .larger-mt-1 {
    --mt: 1rem;
  }
  .larger-mt-2 {
    --mt: 2rem;
  }
  .larger-mt-3 {
    --mt: 3rem;
  }
  .larger-mt-4 {
    --mt: 4rem;
  }
  .larger-mt-5 {
    --mt: 5rem;
  }
  /* margin bottom  */
  .larger-mb-1 {
    --mb: 1rem;
  }
  .larger-mb-2 {
    --mb: 2rem;
  }
  .larger-mb-3 {
    --mb: 3rem;
  }
  .larger-mb-4 {
    --mb: 4rem;
  }
  .larger-mb-5 {
    --mb: 5rem;
  }
  /* margin-left  */
  .larger-ml-1 {
    --ml: 1rem;
  }
  .larger-ml-2 {
    --ml: 2rem;
  }
  .larger-ml-3 {
    --ml: 3rem;
  }
  .larger-ml-4 {
    --ml: 4rem;
  }
  .larger-ml-5 {
    --ml: 5rem;
  }
  /* margin right  */
  .larger-mr-1 {
    --mr: 1rem;
  }
  .larger-mr-2 {
    --mr: 2rem;
  }
  .larger-mr-3 {
    --mr: 3rem;
  }
  .larger-mr-4 {
    --mr: 4rem;
  }
  .larger-mr-5 {
    --mr: 5rem;
  }
  /* padding all  */
  .larger-p-1 {
    --pd: 1rem;
  }
  .larger-p-2 {
    --pd: 2rem;
  }
  .larger-p-3 {
    --pd: 3rem;
  }
  .larger-p-4 {
    --pd: 4rem;
  }
  .larger-p-5 {
    --pd: 5rem;
  }
  /* padding left-right  */
  .larger-px-1 {
    --px: 0px 1rem;
  }
  .larger-px-2 {
    --px: 0px 2rem;
  }
  .larger-px-3 {
    --px: 0px 3rem;
  }
  .larger-px-4 {
    --px: 0px 4rem;
  }
  .larger-px-5 {
    --px: 0px 5rem;
  }
  /* padding top-bottom  */
  .larger-py-1 {
    --py: 1rem 0;
  }
  .larger-py-2 {
    --py: 2rem 0;
  }
  .larger-py-3 {
    --py: 3rem 0;
  }
  .larger-py-4 {
    --py: 4rem 0;
  }
  .larger-py-5 {
    --py: 5rem 0;
  }
  /* padding top  */
  .larger-pt-1 {
    --pt: 1rem;
  }
  .larger-pt-2 {
    --pt: 2rem;
  }
  .larger-pt-3 {
    --pt: 3rem;
  }
  .larger-pt-4 {
    --pt: 4rem;
  }
  .larger-pt-5 {
    --pt: 5rem;
  }
  /* padding bottom  */
  .larger-pb-1 {
    --pb: 1rem;
  }
  .larger-pb-2 {
    --pb: 2rem;
  }
  .larger-pb-3 {
    --pb: 3rem;
  }
  .larger-pb-4 {
    --pb: 4rem;
  }
  .larger-pb-5 {
    --pb: 5rem;
  }
  /* padding left  */
  .larger-pl-1 {
    --pl: 1rem;
  }
  .larger-pl-2 {
    --pl: 2rem;
  }
  .larger-pl-3 {
    --pl: 3rem;
  }
  .larger-pl-4 {
    --pl: 4rem;
  }
  .larger-pl-5 {
    --pl: 5rem;
  }
  /* padding right  */
  .larger-pr-1 {
    --pr: 1rem;
  }
  .larger-pr-2 {
    --pr: 2rem;
  }
  .larger-pr-3 {
    --pr: 3rem;
  }
  .larger-pr-4 {
    --pr: 4rem;
  }
  .larger-pr-5 {
    --pr: 5rem;
  }
}
/* Largest devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  /* Grid */
  .largest-1 {
    --gridTC: repeat(1, 1fr);
  }
  .largest-2 {
    --gridTC: repeat(2, 1fr);
  }
  .largest-3 {
    --gridTC: repeat(3, 1fr);
  }
  .largest-4 {
    --gridTC: repeat(4, 1fr);
  }
  .largest-5 {
    --gridTC: repeat(5, 1fr);
  }
  .largest-6 {
    --gridTC: repeat(6, 1fr);
  }
  .largest-7 {
    --gridTC: repeat(7, 1fr);
  }
  .largest-8 {
    --gridTC: repeat(8, 1fr);
  }
  .largest-9 {
    --gridTC: repeat(9, 1fr);
  }
  .largest-10 {
    --gridTC: repeat(10, 1fr);
  }
  .largest-11 {
    --gridTC: repeat(11, 1fr);
  }
  .largest-12 {
    --gridTC: repeat(12, 1fr);
  }
  /* Expand */
  .largest-span-1 {
    --gcs: span 1;
  }
  .largest-span-2 {
    --gcs: span 2;
  }
  .largest-span-3 {
    --gcs: span 3;
  }
  .largest-span-4 {
    --gcs: span 4;
  }
  .largest-span-5 {
    --gcs: span 5;
  }
  .largest-span-6 {
    --gcs: span 6;
  }
  .largest-span-7 {
    --gcs: span 7;
  }
  .largest-span-8 {
    --gcs: span 8;
  }
  .largest-span-9 {
    --gcs: span 9;
  }
  .largest-span-10 {
    --gcs: span 10;
  }
  .largest-span-11 {
    --gcs: span 11;
  }
  .largest-span-12 {
    --gcs: span 12;
  }
  /* gap  */
  .largest-gap-1 {
    --gg: 1rem;
  }
  .largest-gap-2 {
    --gg: 2rem;
  }
  .largest-gap-3 {
    --gg: 3rem;
  }
  .largest-gap-4 {
    --gg: 4rem;
  }
  .largest-gap-5 {
    --gg: 5rem;
  }
  /* order classes */
.largest-order-0 { --order: 0; }
.largest-order-1 { --order: 1; }
.largest-order-2 { --order: 2; }
  /* margin all  */
  .largest-m-1 {
    --mm: 1rem;
  }
  .largest-m-2 {
    --mm: 2rem;
  }
  .largest-m-3 {
    --mm: 3rem;
  }
  .largest-m-4 {
    --mm: 4rem;
  }
  .largest-m-5 {
    --mm: 5rem;
  }
  /* margin left right  */
  .largest-mx-1 {
    --mx: 0px 1rem;
  }
  .largest-mx-2 {
    --mx: 0px 2rem;
  }
  .largest-mx-3 {
    --mx: 0px 3rem;
  }
  .largest-mx-4 {
    --mx: 0px 4rem;
  }
  .largest-mx-5 {
    --mx: 0px 5rem;
  }
  .largest-my-1 {
    --my: 1rem auto;
  }
  .largest-my-2 {
    --my: 2rem auto;
  }
  .largest-my-3 {
    --my: 3rem auto;
  }
  .largest-my-4 {
    --my: 4rem auto;
  }
  .largest-my-5 {
    --my: 5rem auto;
  }
  /* margin top  */
  .largest-mt-1 {
    --mt: 1rem;
  }
  .largest-mt-2 {
    --mt: 2rem;
  }
  .largest-mt-3 {
    --mt: 3rem;
  }
  .largest-mt-4 {
    --mt: 4rem;
  }
  .largest-mt-5 {
    --mt: 5rem;
  }
  /* margin-bottom  */
  .largest-mb-1 {
    --mb: 1rem;
  }
  .largest-mb-2 {
    --mb: 2rem;
  }
  .largest-mb-3 {
    --mb: 3rem;
  }
  .largest-mb-4 {
    --mb: 4rem;
  }
  .largest-mb-5 {
    --mb: 5rem;
  }
  /* margin-left  */
  .largest-ml-1 {
    --ml: 1rem;
  }
  .largest-ml-2 {
    --ml: 2rem;
  }
  .largest-ml-3 {
    --ml: 3rem;
  }
  .largest-ml-4 {
    --ml: 4rem;
  }
  .largest-ml-5 {
    --ml: 5rem;
  }
  /* margin right  */
  .largest-mr-1 {
    --mr: 1rem;
  }
  .largest-mr-2 {
    --mr: 2rem;
  }
  .largest-mr-3 {
    --mr: 3rem;
  }
  .largest-mr-4 {
    --mr: 4rem;
  }
  .largest-mr-5 {
    --mr: 5rem;
  }
  /* padding all  */
  .largest-p-1 {
    --pd: 1rem;
  }
  .largest-p-2 {
    --pd: 2rem;
  }
  .largest-p-3 {
    --pd: 3rem;
  }
  .largest-p-4 {
    --pd: 4rem;
  }
  .largest-p-5 {
    --pd: 5rem;
  }
  /* padding left-right  */
  .largest-px-1 {
    --px: 0px 1rem;
  }
  .largest-px-2 {
    --px: 0px 2rem;
  }
  .largest-px-3 {
    --px: 0px 3rem;
  }
  .largest-px-4 {
    --px: 0px 4rem;
  }
  .largest-px-5 {
    --px: 0px 5rem;
  }
  /* padding top-bottom  */
  .largest-py-1 {
    --py: 1rem 0;
  }
  .largest-py-2 {
    --py: 2rem 0;
  }
  .largest-py-3 {
    --py: 3rem 0;
  }
  .largest-py-4 {
    --py: 4rem 0;
  }
  .largest-py-5 {
    --py: 5rem 0;
  }
  /* padding top  */
  .largest-pt-1 {
    --pt: 1rem;
  }
  .largest-pt-2 {
    --pt: 2rem;
  }
  .largest-pt-3 {
    --pt: 3rem;
  }
  .largest-pt-4 {
    --pt: 4rem;
  }
  .largest-pt-5 {
    --pt: 5rem;
  }
  /* padding bottom  */
  .largest-pb-1 {
    --pb: 1rem;
  }
  .largest-pb-2 {
    --pb: 2rem;
  }
  .largest-pb-3 {
    --pb: 3rem;
  }
  .largest-pb-4 {
    --pb: 4rem;
  }
  .largest-pb-5 {
    --pb: 5rem;
  }
  /* padding left  */
  .largest-pl-1 {
    --pl: 1rem;
  }
  .largest-pl-2 {
    --pl: 2rem;
  }
  .largest-pl-3 {
    --pl: 3rem;
  }
  .largest-pl-4 {
    --pl: 4rem;
  }
  .largest-pl-5 {
    --pl: 5rem;
  }
  /* padding right  */
  .largest-pr-1 {
    --pr: 1rem;
  }
  .largest-pr-2 {
    --pr: 2rem;
  }
  .largest-pr-3 {
    --pr: 3rem;
  }
  .largest-pr-4 {
    --pr: 4rem;
  }
  .largest-pr-5 {
    --pr: 5rem;
  }
}