/* row */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

/* column */
.column {
  display: flex;
  flex-direction: column;
}

/* gap-xy */
.g-0 {
  gap: 0rem;
}

.g-4 {
  gap: 0.25rem;
}

.g-8 {
  gap: 0.5rem;
}

.g-16 {
  gap: 1rem;
}

.g-24 {
  gap: 1.5rem;
}

.g-32 {
  gap: 2rem;
}

/* gap-x */
.gx-0 {
  column-gap: 0rem;
}

.gx-4 {
  column-gap: 0.25rem;
}

.gx-8 {
  column-gap: 0.5rem;
}

.gx-16 {
  column-gap: 1rem;
}

.gx-24 {
  column-gap: 1.5rem;
}

.gx-32 {
  column-gap: 2rem;
}

/* gap-y */
.gy-0 {
  row-gap: 0rem;
}

.gy-4 {
  row-gap: 0.25rem;
}

.gy-8 {
  row-gap: 0.5rem;
}

.gy-16 {
  row-gap: 1rem;
}

.gy-24 {
  row-gap: 1.5rem;
}

.gy-32 {
  row-gap: 2rem;
}

/* flex-align */
.justify-start {
  justify-content: start;
}

.justify-end {
  justify-content: end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* align-items */
.align-left {
  align-items: start;
}

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

.align-end {
  align-items: end;
}

/* text-align */
.text-start {
  text-align: start;
}

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

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

/* margin */
.m-auto {
  margin: auto;
}

.m-0 {
  margin: 0;
}

.m-4 {
  margin: 4px;
}

.m-8 {
  margin: 8px;
}

.m-16 {
  margin: 16px;
}

.m-24 {
  margin: 24px;
}

.m-32 {
  margin: 32px;
}

/* margin-x */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}

.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}

/* margin-y */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* margin-top */
.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

/* margin-bottom */
.mb-0 {
  margin-bottom: 0;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}

/* margin-left */
.ml-0 {
  margin-left: 0;
}

.ml-4 {
  margin-left: 4px;
}

.ml-8 {
  margin-left: 8px;
}

.ml-16 {
  margin-left: 16px;
}

.ml-24 {
  margin-left: 24px;
}

.ml-32 {
  margin-left: 32px;
}

/* margin-right */
.mr-0 {
  margin-right: 0;
}

.mr-4 {
  margin-right: 4px;
}

.mr-8 {
  margin-right: 8px;
}

.mr-16 {
  margin-right: 16px;
}

.mr-24 {
  margin-right: 24px;
}

.mr-32 {
  margin-right: 32px;
}

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

.p-4 {
  padding: 4px;
}

.p-8 {
  padding: 8px;
}

.p-12 {
  padding: 12px;
}

.p-16 {
  padding: 16px;
}

.p-24 {
  padding: 24px;
}

.p-32 {
  padding: 32px;
}

/* padding-x */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

/* padding-y */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* padding-top */
.pt-0 {
  padding-top: 0;
}

.pt-4 {
  padding-top: 4px;
}

.pt-8 {
  padding-top: 8px;
}

.pt-16 {
  padding-top: 16px;
}

.pt-24 {
  padding-top: 24px;
}

.pt-32 {
  padding-top: 32px;
}

/* padding-bottom */
.pb-0 {
  padding-bottom: 0;
}

.pb-4 {
  padding-bottom: 4px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pb-32 {
  padding-bottom: 32px;
}

/* padding-left */
.pl-0 {
  padding-left: 0;
}

.pl-4 {
  padding-left: 4px;
}

.pl-8 {
  padding-left: 8px;
}

.pl-16 {
  padding-left: 16px;
}

.pl-24 {
  padding-left: 24px;
}

.pl-32 {
  padding-left: 32px;
}

/* padding-right */
.pr-0 {
  padding-right: 0;
}

.pr-4 {
  padding-right: 4px;
}

.pr-8 {
  padding-right: 8px;
}

.pr-16 {
  padding-right: 16px;
}

.pr-24 {
  padding-right: 24px;
}

.pr-32 {
  padding-right: 32px;
}

/* textarea */
.resize {
  resize: both;
}

.resize-none {
  resize: none;
}

.resize-x {
  resize: horizontal;
}

.resize-y {
  resize: vertical;
}

/* height */
.h-auto {
  height: auto
}

.h-40 {
  height: 40px
}

.h-48 {
  height: 48px
}

.h-56 {
  height: 56px
}

.h-60 {
  height: 60px
}

.h-100 {
  height: 100px
}

.h-120 {
  height: 120px
}

.h-200 {
  height: 200px
}

.h-300 {
  height: 300px
}

.max-height {
  max-height: fit-content;
}

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

.w-48 {
  width: 48px;
}

.w-56 {
  width: 56px;
}

.w-100 {
  width: 100px;
}

.w-120 {
  width: 120px;
}

.w-200 {
  width: 200px;
}

.w-300 {
  width: 200px;
}

.w-400 {
  width: 200px;
}

.w-500 {
  width: 200px;
}

.w-600 {
  width: 200px;
}

.w-full {
  width: 100%;
}

/* display */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-inline {
  display: inline-block;
}

.wrap {
  flex-wrap: wrap;
}

/* fonts */
.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

/* border */
.border-none {
  border: none;
}

.border {
  border: 1px solid var(--border-color);
}

.border-x {
  border: none;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.border-y {
  border: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.border-l {
  border: none;
  border-left: 1px solid var(--border-color);
}

.border-t {
  border: none;
  border-top: 1px solid var(--border-color);
}

.border-r {
  border: none;
  border-right: 1px solid var(--border-color);
}

.border-b {
  border: none;
  border-bottom: 1px solid var(--border-color);
}

.border-nl {
  border: none;
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.border-nt {
  border: none;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.border-nr {
  border: none;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.border-nb {
  border: none;
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.rounded-0 {
  border-radius: 0;
}

.rounded {
  border-radius: 4px;
}

.rounded-2 {
  border-radius: 2px;
}

.rounded-l {
  border-radius: 4px 0 0 4px;
}

.rounded-t {
  border-radius: 4px 4px 0 0;
}

.rounded-r {
  border-radius: 0 4px 4px 0;
}

.rounded-b {
  border-radius: 0 0 4px 4px;
}

/* background */
.bg-none {
  background: none;
}

/* overflow */
.overflow {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

@media (min-width: 768px) and (max-width: 992px) {

  /* row */
  .row-tab {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .col-tab-1 {
    grid-column: span 1;
  }

  .col-tab-2 {
    grid-column: span 2;
  }

  .col-tab-3 {
    grid-column: span 3;
  }

  .col-tab-4 {
    grid-column: span 4;
  }

  .col-tab-5 {
    grid-column: span 5;
  }

  .col-tab-6 {
    grid-column: span 6;
  }

  .col-tab-7 {
    grid-column: span 7;
  }

  .col-tab-8 {
    grid-column: span 8;
  }

  .col-tab-9 {
    grid-column: span 9;
  }

  .col-tab-10 {
    grid-column: span 10;
  }

  .col-tab-11 {
    grid-column: span 11;
  }

  .col-tab-12 {
    grid-column: span 12;
  }

  /* column */
  .column-tab {
    display: flex;
    flex-direction: column;
  }

  /* gap-xy */
  .g-tab-0 {
    gap: 0rem;
  }

  .g-tab-4 {
    gap: 0.25rem;
  }

  .g-tab-8 {
    gap: 0.5rem;
  }

  .g-tab-16 {
    gap: 1rem;
  }

  .g-tab-24 {
    gap: 1.5rem;
  }

  .g-tab-32 {
    gap: 2rem;
  }

  /* gap-x */
  .gx-tab-0 {
    column-gap: 0rem;
  }

  .gx-tab-4 {
    column-gap: 0.25rem;
  }

  .gx-tab-8 {
    column-gap: 0.5rem;
  }

  .gx-tab-16 {
    column-gap: 1rem;
  }

  .gx-tab-24 {
    column-gap: 1.5rem;
  }

  .gx-tab-32 {
    column-gap: 2rem;
  }

  /* gap-y */
  .gy-tab-0 {
    row-gap: 0rem;
  }

  .gy-tab-4 {
    row-gap: 0.25rem;
  }

  .gy-tab-8 {
    row-gap: 0.5rem;
  }

  .gy-tab-16 {
    row-gap: 1rem;
  }

  .gy-tab-24 {
    row-gap: 1.5rem;
  }

  .gy-tab-32 {
    row-gap: 2rem;
  }

  /* flex-align */
  .justify-tab-start {
    justify-content: start;
  }

  .justify-tab-end {
    justify-content: end;
  }

  .justify-tab-center {
    justify-content: center;
  }

  .justify-tab-between {
    justify-content: space-between;
  }

  /* align-items */
  .align-tab-left {
    align-items: start;
  }

  .align-tab-center {
    align-items: center;
  }

  .align-tab-end {
    align-items: end;
  }

  /* text-align */
  .text-tab-start {
    text-align: start;
  }

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

  .text-tab-end {
    text-align: end;
  }

  /* margin */
  .m-tab-auto {
    margin: auto;
  }

  .m-tab-0 {
    margin: 0;
  }

  .m-tab-4 {
    margin: 4px;
  }

  .m-tab-8 {
    margin: 8px;
  }

  .m-tab-16 {
    margin: 16px;
  }

  .m-tab-24 {
    margin: 24px;
  }

  .m-tab-32 {
    margin: 32px;
  }

  /* margin-x */
  .mx-tab-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-tab-4 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .mx-tab-8 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .mx-tab-16 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .mx-tab-24 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .mx-tab-32 {
    margin-left: 32px;
    margin-right: 32px;
  }

  /* margin-y */
  .my-tab-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-tab-4 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .my-tab-8 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .my-tab-16 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .my-tab-24 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .my-tab-32 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  /* margin-top */
  .mt-tab-0 {
    margin-top: 0;
  }

  .mt-tab-4 {
    margin-top: 4px;
  }

  .mt-tab-8 {
    margin-top: 8px;
  }

  .mt-tab-16 {
    margin-top: 16px;
  }

  .mt-tab-24 {
    margin-top: 24px;
  }

  .mt-tab-32 {
    margin-top: 32px;
  }

  /* margin-bottom */
  .mb-tab-0 {
    margin-bottom: 0;
  }

  .mb-tab-4 {
    margin-bottom: 4px;
  }

  .mb-tab-8 {
    margin-bottom: 8px;
  }

  .mb-tab-16 {
    margin-bottom: 16px;
  }

  .mb-tab-24 {
    margin-bottom: 24px;
  }

  .mb-tab-32 {
    margin-bottom: 32px;
  }

  /* margin-left */
  .ml-tab-0 {
    margin-left: 0;
  }

  .ml-tab-4 {
    margin-left: 4px;
  }

  .ml-tab-8 {
    margin-left: 8px;
  }

  .ml-tab-16 {
    margin-left: 16px;
  }

  .ml-tab-24 {
    margin-left: 24px;
  }

  .ml-tab-32 {
    margin-left: 32px;
  }

  /* margin-right */
  .mr-tab-0 {
    margin-right: 0;
  }

  .mr-tab-4 {
    margin-right: 4px;
  }

  .mr-tab-8 {
    margin-right: 8px;
  }

  .mr-tab-16 {
    margin-right: 16px;
  }

  .mr-tab-24 {
    margin-right: 24px;
  }

  .mr-tab-32 {
    margin-right: 32px;
  }

  /* padding */
  .p-tab-0 {
    padding: 0;
  }

  .p-tab-4 {
    padding: 4px;
  }

  .p-tab-8 {
    padding: 8px;
  }

  .p-tab-12 {
    padding: 12px;
  }

  .p-tab-16 {
    padding: 16px;
  }

  .p-tab-24 {
    padding: 24px;
  }

  .p-tab-32 {
    padding: 32px;
  }

  /* padding-x */
  .px-tab-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .px-tab-4 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .px-tab-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .px-tab-16 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .px-tab-24 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .px-tab-32 {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* padding-y */
  .py-tab-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-tab-4 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .py-tab-8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .py-tab-16 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .py-tab-24 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .py-tab-32 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* padding-top */
  .pt-tab-0 {
    padding-top: 0;
  }

  .pt-tab-4 {
    padding-top: 4px;
  }

  .pt-tab-8 {
    padding-top: 8px;
  }

  .pt-tab-16 {
    padding-top: 16px;
  }

  .pt-tab-24 {
    padding-top: 24px;
  }

  .pt-tab-32 {
    padding-top: 32px;
  }

  /* padding-bottom */
  .pb-tab-0 {
    padding-bottom: 0;
  }

  .pb-tab-4 {
    padding-bottom: 4px;
  }

  .pb-tab-8 {
    padding-bottom: 8px;
  }

  .pb-tab-16 {
    padding-bottom: 16px;
  }

  .pb-tab-24 {
    padding-bottom: 24px;
  }

  .pb-tab-32 {
    padding-bottom: 32px;
  }

  /* padding-left */
  .pl-tab-0 {
    padding-left: 0;
  }

  .pl-tab-4 {
    padding-left: 4px;
  }

  .pl-tab-8 {
    padding-left: 8px;
  }

  .pl-tab-16 {
    padding-left: 16px;
  }

  .pl-tab-24 {
    padding-left: 24px;
  }

  .pl-tab-32 {
    padding-left: 32px;
  }

  /* padding-right */
  .pr-tab-0 {
    padding-right: 0;
  }

  .pr-tab-4 {
    padding-right: 4px;
  }

  .pr-tab-8 {
    padding-right: 8px;
  }

  .pr-tab-16 {
    padding-right: 16px;
  }

  .pr-tab-24 {
    padding-right: 24px;
  }

  .pr-tab-32 {
    padding-right: 32px;
  }

  /* textarea */
  .resize-tab {
    resize: both;
  }

  .resize-tab-none {
    resize: none;
  }

  .resize-tab-x {
    resize: horizontal;
  }

  .resize-tab-y {
    resize: vertical;
  }

  /* height */
  .h-tab-auto {
    height: auto
  }

  .h-tab-40 {
    height: 40px
  }

  .h-tab-48 {
    height: 48px
  }

  .h-tab-56 {
    height: 56px
  }

  .h-tab-60 {
    height: 60px
  }

  .h-tab-100 {
    height: 100px
  }

  .h-tab-120 {
    height: 120px
  }

  .h-tab-200 {
    height: 200px
  }

  .h-tab-300 {
    height: 300px
  }

  .max-tab-height {
    max-height: fit-content;
  }

  /* width */
  .w-tab-40 {
    width: 40px;
  }

  .w-tab-48 {
    width: 48px;
  }

  .w-tab-56 {
    width: 56px;
  }

  .w-tab-100 {
    width: 100px;
  }

  .w-tab-120 {
    width: 120px;
  }

  .w-tab-200 {
    width: 200px;
  }

  .w-tab-300 {
    width: 200px;
  }

  .w-tab-400 {
    width: 200px;
  }

  .w-tab-500 {
    width: 200px;
  }

  .w-tab-600 {
    width: 200px;
  }

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

  /* display */
  .d-tab-flex {
    display: flex;
  }

  .d-tab-block {
    display: block;
  }

  .d-tab-none {
    display: none;
  }

  .d-tab-inline {
    display: inline-block;
  }

  .wrap-tab {
    flex-wrap: wrap;
  }

  /* fonts */
  .fs-tab-14 {
    font-size: 14px;
  }

  .fs-tab-16 {
    font-size: 16px;
  }

  .fw-tab-500 {
    font-weight: 500;
  }

  .fw-tab-600 {
    font-weight: 600;
  }

  /* border */
  .border-tab-none {
    border: none;
  }

  .border-tab {
    border: 1px solid var(--border-color);
  }

  .border-tab-x {
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .border-tab-y {
    border: none;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-tab-l {
    border: none;
    border-left: 1px solid var(--border-color);
  }

  .border-tab-t {
    border: none;
    border-top: 1px solid var(--border-color);
  }

  .border-tab-r {
    border: none;
    border-right: 1px solid var(--border-color);
  }

  .border-tab-b {
    border: none;
    border-bottom: 1px solid var(--border-color);
  }

  .border-tab-nl {
    border: none;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-tab-nt {
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-tab-nr {
    border: none;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-tab-nb {
    border: none;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .rounded-tab-0 {
    border-radius: 0;
  }

  .rounded-tab {
    border-radius: 4px;
  }

  .rounded-tab-2 {
    border-radius: 2px;
  }

  .rounded-tab-l {
    border-radius: 4px 0 0 4px;
  }

  .rounded-tab-t {
    border-radius: 4px 4px 0 0;
  }

  .rounded-tab-r {
    border-radius: 0 4px 4px 0;
  }

  .rounded-tab-b {
    border-radius: 0 0 4px 4px;
  }

  /* background */
  .bg-tab-none {
    background: none;
  }

  /* overflow */
  .overflow-tab {
    overflow: auto;
  }

  .overflow-tab-hidden {
    overflow: hidden;
  }

  .overflow-tab-scroll {
    overflow: scroll;
  }
}

@media (max-width: 767px) {

  /* row */
  .row-mob {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .col-mob-1 {
    grid-column: span 1;
  }

  .col-mob-2 {
    grid-column: span 2;
  }

  .col-mob-3 {
    grid-column: span 3;
  }

  .col-mob-4 {
    grid-column: span 4;
  }

  .col-mob-5 {
    grid-column: span 5;
  }

  .col-mob-6 {
    grid-column: span 6;
  }

  .col-mob-7 {
    grid-column: span 7;
  }

  .col-mob-8 {
    grid-column: span 8;
  }

  .col-mob-9 {
    grid-column: span 9;
  }

  .col-mob-10 {
    grid-column: span 10;
  }

  .col-mob-11 {
    grid-column: span 11;
  }

  .col-mob-12 {
    grid-column: span 12;
  }

  /* column */
  .column-mob {
    display: flex;
    flex-direction: column;
  }

  /* gap-xy */
  .g-mob-0 {
    gap: 0rem;
  }

  .g-mob-4 {
    gap: 0.25rem;
  }

  .g-mob-8 {
    gap: 0.5rem;
  }

  .g-mob-16 {
    gap: 1rem;
  }

  .g-mob-24 {
    gap: 1.5rem;
  }

  .g-mob-32 {
    gap: 2rem;
  }

  /* gap-x */
  .gx-mob-0 {
    column-gap: 0rem;
  }

  .gx-mob-4 {
    column-gap: 0.25rem;
  }

  .gx-mob-8 {
    column-gap: 0.5rem;
  }

  .gx-mob-16 {
    column-gap: 1rem;
  }

  .gx-mob-24 {
    column-gap: 1.5rem;
  }

  .gx-mob-32 {
    column-gap: 2rem;
  }

  /* gap-y */
  .gy-mob-0 {
    row-gap: 0rem;
  }

  .gy-mob-4 {
    row-gap: 0.25rem;
  }

  .gy-mob-8 {
    row-gap: 0.5rem;
  }

  .gy-mob-16 {
    row-gap: 1rem;
  }

  .gy-mob-24 {
    row-gap: 1.5rem;
  }

  .gy-mob-32 {
    row-gap: 2rem;
  }

  /* flex-align */
  .justify-mob-start {
    justify-content: start;
  }

  .justify-mob-end {
    justify-content: end;
  }

  .justify-mob-center {
    justify-content: center;
  }

  .justify-mob-between {
    justify-content: space-between;
  }

  /* align-items */
  .align-mob-left {
    align-items: start;
  }

  .align-mob-center {
    align-items: center;
  }

  .align-mob-end {
    align-items: end;
  }

  /* text-align */
  .text-mob-start {
    text-align: start;
  }

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

  .text-mob-end {
    text-align: end;
  }

  /* margin */
  .m-mob-auto {
    margin: auto;
  }

  .m-mob-0 {
    margin: 0;
  }

  .m-mob-4 {
    margin: 4px;
  }

  .m-mob-8 {
    margin: 8px;
  }

  .m-mob-16 {
    margin: 16px;
  }

  .m-mob-24 {
    margin: 24px;
  }

  .m-mob-32 {
    margin: 32px;
  }

  /* margin-x */
  .mx-mob-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-mob-4 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .mx-mob-8 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .mx-mob-16 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .mx-mob-24 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .mx-mob-32 {
    margin-left: 32px;
    margin-right: 32px;
  }

  /* margin-y */
  .my-mob-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-mob-4 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .my-mob-8 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .my-mob-16 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .my-mob-24 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .my-mob-32 {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  /* margin-top */
  .mt-mob-0 {
    margin-top: 0;
  }

  .mt-mob-4 {
    margin-top: 4px;
  }

  .mt-mob-8 {
    margin-top: 8px;
  }

  .mt-mob-16 {
    margin-top: 16px;
  }

  .mt-mob-24 {
    margin-top: 24px;
  }

  .mt-mob-32 {
    margin-top: 32px;
  }

  /* margin-bottom */
  .mb-mob-0 {
    margin-bottom: 0;
  }

  .mb-mob-4 {
    margin-bottom: 4px;
  }

  .mb-mob-8 {
    margin-bottom: 8px;
  }

  .mb-mob-16 {
    margin-bottom: 16px;
  }

  .mb-mob-24 {
    margin-bottom: 24px;
  }

  .mb-mob-32 {
    margin-bottom: 32px;
  }

  /* margin-left */
  .ml-mob-0 {
    margin-left: 0;
  }

  .ml-mob-4 {
    margin-left: 4px;
  }

  .ml-mob-8 {
    margin-left: 8px;
  }

  .ml-mob-16 {
    margin-left: 16px;
  }

  .ml-mob-24 {
    margin-left: 24px;
  }

  .ml-mob-32 {
    margin-left: 32px;
  }

  /* margin-right */
  .mr-mob-0 {
    margin-right: 0;
  }

  .mr-mob-4 {
    margin-right: 4px;
  }

  .mr-mob-8 {
    margin-right: 8px;
  }

  .mr-mob-16 {
    margin-right: 16px;
  }

  .mr-mob-24 {
    margin-right: 24px;
  }

  .mr-mob-32 {
    margin-right: 32px;
  }

  /* padding */
  .p-mob-0 {
    padding: 0;
  }

  .p-mob-4 {
    padding: 4px;
  }

  .p-mob-8 {
    padding: 8px;
  }

  .p-mob-12 {
    padding: 12px;
  }

  .p-mob-16 {
    padding: 16px;
  }

  .p-mob-24 {
    padding: 24px;
  }

  .p-mob-32 {
    padding: 32px;
  }

  /* padding-x */
  .px-mob-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .px-mob-4 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .px-mob-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .px-mob-16 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .px-mob-24 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .px-mob-32 {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* padding-y */
  .py-mob-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-mob-4 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .py-mob-8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .py-mob-16 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .py-mob-24 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .py-mob-32 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* padding-top */
  .pt-mob-0 {
    padding-top: 0;
  }

  .pt-mob-4 {
    padding-top: 4px;
  }

  .pt-mob-8 {
    padding-top: 8px;
  }

  .pt-mob-16 {
    padding-top: 16px;
  }

  .pt-mob-24 {
    padding-top: 24px;
  }

  .pt-mob-32 {
    padding-top: 32px;
  }

  /* padding-bottom */
  .pb-mob-0 {
    padding-bottom: 0;
  }

  .pb-mob-4 {
    padding-bottom: 4px;
  }

  .pb-mob-8 {
    padding-bottom: 8px;
  }

  .pb-mob-16 {
    padding-bottom: 16px;
  }

  .pb-mob-24 {
    padding-bottom: 24px;
  }

  .pb-mob-32 {
    padding-bottom: 32px;
  }

  /* padding-left */
  .pl-mob-0 {
    padding-left: 0;
  }

  .pl-mob-4 {
    padding-left: 4px;
  }

  .pl-mob-8 {
    padding-left: 8px;
  }

  .pl-mob-16 {
    padding-left: 16px;
  }

  .pl-mob-24 {
    padding-left: 24px;
  }

  .pl-mob-32 {
    padding-left: 32px;
  }

  /* padding-right */
  .pr-mob-0 {
    padding-right: 0;
  }

  .pr-mob-4 {
    padding-right: 4px;
  }

  .pr-mob-8 {
    padding-right: 8px;
  }

  .pr-mob-16 {
    padding-right: 16px;
  }

  .pr-mob-24 {
    padding-right: 24px;
  }

  .pr-mob-32 {
    padding-right: 32px;
  }

  /* textarea */
  .resize-mob {
    resize: both;
  }

  .resize-mob-none {
    resize: none;
  }

  .resize-mob-x {
    resize: horizontal;
  }

  .resize-mob-y {
    resize: vertical;
  }

  /* height */
  .h-mob-auto {
    height: auto
  }

  .h-mob-40 {
    height: 40px
  }

  .h-mob-48 {
    height: 48px
  }

  .h-mob-56 {
    height: 56px
  }

  .h-mob-60 {
    height: 60px
  }

  .h-mob-100 {
    height: 100px
  }

  .h-mob-120 {
    height: 120px
  }

  .h-mob-200 {
    height: 200px
  }

  .h-mob-300 {
    height: 300px
  }

  .max-mob-height {
    max-height: fit-content;
  }

  /* width */
  .w-mob-40 {
    width: 40px;
  }

  .w-mob-48 {
    width: 48px;
  }

  .w-mob-56 {
    width: 56px;
  }

  .w-mob-100 {
    width: 100px;
  }

  .w-mob-120 {
    width: 120px;
  }

  .w-mob-200 {
    width: 200px;
  }

  .w-mob-300 {
    width: 200px;
  }

  .w-mob-400 {
    width: 200px;
  }

  .w-mob-500 {
    width: 200px;
  }

  .w-mob-600 {
    width: 200px;
  }

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

  /* display */
  .d-mob-flex {
    display: flex;
  }

  .d-mob-block {
    display: block;
  }

  .d-mob-none {
    display: none;
  }

  .d-mob-inline {
    display: inline-block;
  }

  .wrap-mob {
    flex-wrap: wrap;
  }

  /* fonts */
  .fs-mob-14 {
    font-size: 14px;
  }

  .fs-mob-16 {
    font-size: 16px;
  }

  .fw-mob-500 {
    font-weight: 500;
  }

  .fw-mob-600 {
    font-weight: 600;
  }

  /* border */
  .border-mob-none {
    border: none;
  }

  .border-mob {
    border: 1px solid var(--border-color);
  }

  .border-mob-x {
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .border-mob-y {
    border: none;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-mob-l {
    border: none;
    border-left: 1px solid var(--border-color);
  }

  .border-mob-t {
    border: none;
    border-top: 1px solid var(--border-color);
  }

  .border-mob-r {
    border: none;
    border-right: 1px solid var(--border-color);
  }

  .border-mob-b {
    border: none;
    border-bottom: 1px solid var(--border-color);
  }

  .border-mob-nl {
    border: none;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-mob-nt {
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-mob-nr {
    border: none;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .border-mob-nb {
    border: none;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  .rounded-mob-0 {
    border-radius: 0;
  }

  .rounded-mob {
    border-radius: 4px;
  }

  .rounded-mob-2 {
    border-radius: 2px;
  }

  .rounded-mob-l {
    border-radius: 4px 0 0 4px;
  }

  .rounded-mob-t {
    border-radius: 4px 4px 0 0;
  }

  .rounded-mob-r {
    border-radius: 0 4px 4px 0;
  }

  .rounded-mob-b {
    border-radius: 0 0 4px 4px;
  }

  /* background */
  .bg-mob-none {
    background: none;
  }

  /* overflow */
  .overflow-mob {
    overflow: auto;
  }

  .overflow-mob-hidden {
    overflow: hidden;
  }

  .overflow-mob-scroll {
    overflow: scroll;
  }
}