/* margin-top */
.mt {
  --mt: 0;
  margin-top: var(--mt);
}
.mt--auto {
  --mt: auto;
}
.mt--2 {
  --mt: 2px;
}
.mt--4 {
  --mt: 4px;
}
.mt--6 {
  --mt: 6px;
}
.mt--8 {
  --mt: 8px;
}
.mt--10 {
  --mt: 10px;
}
.mt--12 {
  --mt: 12px;
}
.mt--16 {
  --mt: 16px;
}
.mt--20 {
  --mt: 20px;
}
.mt--24 {
  --mt: 24px;
}
.mt--32 {
  --mt: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.mt--40 {
  --mt: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.mt--48 {
  --mt: clamp(32px, 4vw, 48px);
}
.mt--56 {
  --mt: clamp(32px, 4vw, 56px);
}
.mt--64 {
  --mt: clamp(32px, 5vw, 64px);
}
.mt--80 {
  --mt: clamp(32px, 5vw, 80px);
}
.mt--120 {
  --mt: clamp(32px, 8vw, 120px);
}

/* margin-bottom */
.mb {
  --mb: 0;
  margin-bottom: var(--mb);
}
.mb--auto {
  --mb: auto;
}
.mb--2 {
  --mb: 2px;
}
.mb--4 {
  --mb: 4px;
}
.mb--6 {
  --mb: 6px;
}
.mb--8 {
  --mb: 8px;
}
.mb--12 {
  --mb: 12px;
}
.mb--14 {
  --mb: 14px;
}
.mb--16 {
  --mb: 16px;
}
.mb--20 {
  --mb: 20px;
}
.mb--24 {
  --mb: 24px;
}
.mb--32 {
  --mb: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.mb--40 {
  --mb: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.mb--48 {
  --mb: clamp(32px, 4vw, 48px);
}
.mb--56 {
  --mb: clamp(32px, 4vw, 56px);
}
.mb--64 {
  --mb: clamp(32px, 5vw, 64px);
}
.mb--80 {
  --mb: clamp(32px, 5vw, 80px);
}
.mb--120 {
  --mb: clamp(32px, 8vw, 120px);
}

/* margin-right */
.mr {
  --mr: 0;
  margin-right: var(--mr);
}
.mr--auto {
  --mr: auto;
}
.mr--6 {
  --mr: 6px;
}
.mr--8 {
  --mr: 8px;
}
.mr--12 {
  --mr: 12px;
}
.mr--16 {
  --mr: 16px;
}
.mr--20 {
  --mr: 20px;
}
.mr--24 {
  --mr: 24px;
}
.mr--32 {
  --mr: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.mr--40 {
  --mr: clamp(24px, 2.667vw + 0.444rem, 40px);
}

/* margin-left */
.ml {
  --ml: 0;
  margin-left: var(--ml);
}
.ml--auto {
  --ml: auto;
}
.ml--6 {
  --ml: 6px;
}
.ml--8 {
  --ml: 8px;
}
.ml--12 {
  --ml: 12px;
}
.ml--16 {
  --ml: 16px;
}
.ml--20 {
  --ml: 20px;
}
.ml--24 {
  --ml: 24px;
}
.ml--32 {
  --ml: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.ml--40 {
  --ml: clamp(24px, 2.667vw + 0.444rem, 40px);
}

/* margin-inline */
.mi {
  --mi: 0;
  margin-inline: var(--mi);
}
.mi--20 {
  --mi: 20px;
}
.mi--24 {
  --mi: 24px;
}
.mi--32 {
  --mi: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.mi--40 {
  --mi: clamp(24px, 2.667vw + 0.444rem, 40px);
}

/* padding-top */
.pt {
  --pt: 0;
  padding-top: var(--pt);
}
.pt--2 {
  --pt: 2px;
}
.pt--4 {
  --pt: 4px;
}
.pt--6 {
  --pt: 6px;
}
.pt--8 {
  --pt: 8px;
}
.pt--12 {
  --pt: 12px;
}
.pt--16 {
  --pt: 16px;
}
.pt--20 {
  --pt: 20px;
}
.pt--24 {
  --pt: 24px;
}
.pt--32 {
  --pt: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.pt--40 {
  --pt: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.pt--48 {
  --pt: clamp(32px, 4vw, 48px);
}
.pt--56 {
  --pt: clamp(32px, 4vw, 56px);
}
.pt--64 {
  --pt: clamp(32px, 5vw, 64px);
}
.pt--80 {
  --pt: clamp(32px, 5vw, 80px);
}
.pt--120 {
  --pt: clamp(32px, 8vw, 120px);
}

/* padding-bottom */
.pb {
  --pb: 0;
  padding-bottom: var(--pb);
}
.pb--2 {
  --pb: 2px;
}
.pb--4 {
  --pb: 4px;
}
.pb--6 {
  --pb: 6px;
}
.pb--8 {
  --pb: 8px;
}
.pb--12 {
  --pb: 12px;
}
.pb--16 {
  --pb: 16px;
}
.pb--20 {
  --pb: 20px;
}
.pb--24 {
  --pb: 24px;
}
.pb--32 {
  --pb: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.pb--40 {
  --pb: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.pb--48 {
  --pb: clamp(32px, 4vw, 48px);
}
.pb--56 {
  --pb: clamp(32px, 4vw, 56px);
}
.pb--64 {
  --pb: clamp(32px, 5vw, 64px);
}
.pb--80 {
  --pb: clamp(32px, 5vw, 80px);
}
.pb--120 {
  --pb: clamp(32px, 8vw, 120px);
}

/* padding-right */
.pr {
  --pr: 0;
  padding-right: var(--pr);
}
.pr--20 {
  --pr: 20px;
}

/* padding-left */
.pl {
  --pl: 0;
  padding-left: var(--pl);
}
.pl--20 {
  --pl: 20px;
}

/* padding */
.p {
  --padding: 0;
  padding: var(--padding);
}
.p--24 {
  --padding: 24px;
}
.p--32 {
  --padding: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.p--40 {
  --padding: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.p--48 {
  --padding: clamp(32px, 4vw, 48px);
}
.p--56 {
  --padding: clamp(32px, 4vw, 56px);
}

/* padding-inline */
.pi {
  --pi: 0;
  padding-inline: var(--pi);
}
.pi--20 {
  --pi: 20px;
}
.pi--24 {
  --pi: 24px;
}
.pi--32 {
  --pi: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.pi--40 {
  --pi: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.pi--48 {
  --pi: clamp(32px, 4vw, 48px);
}

/* padding-block */
.pv {
  --pv: 0;
  padding-block: var(--pv);
}
.pv--20 {
  --pv: 20px;
}
.pv--24 {
  --pv: 24px;
}
.pv--32 {
  --pv: clamp(24px, 1.333vw + 0.889rem, 32px);
}
.pv--40 {
  --pv: clamp(24px, 2.667vw + 0.444rem, 40px);
}
.pv--48 {
  --pv: clamp(32px, 4vw, 48px);
}