/* margin */
.m {
  --m: 0;
  margin: var(--m);
}

.m--40 {
	--m: clamp(24px, 4vw, 40px);
}

/* margin-inline */
.mi {
  --mi: 0;
  margin-inline: var(--mi);
}

.mi--auto {
  --mi: auto;
}

.mi--20 {
  --mi: 20px;
}

.mi--24 {
  --mi: 20px;
}

.mi--32 {
  --mi: clamp(24px, 3vw, 32px);
}

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

.mt--auto {
  --mt: auto;
}

.mt--1 {
  --mt: 1px;
}

.mt--2 {
  --mt: 2px;
}

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

.mt--6 {
  --mt: 6px;
}

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

.mt--12 {
  --mt: 12px;
}

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

.mt--20 {
  --mt: 20px;
}

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

.mt--28 {
  --mt: 28px;
}

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

.mt--36 {
  --mt: 36px;
}

.mt--40 {
  --mt: 40px;
}

.mt--48 {
  --mt: clamp(40px, 4vw, 48px);
}

.mt--56 {
  --mt: clamp(40px, 4vw, 56px);
}

.mt--64 {
  --mt: clamp(40px, 5vw, 64px);
}

.mt--80 {
  --mt: clamp(40px, 5vw, 80px);
}

.mt--88 {
  --mt: clamp(40px, 6vw, 88px);
}

.mt--120 {
  --mt: clamp(40px, 8vw, 120px);
}

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

.mb--auto {
  --mb: auto;
}

.mb--1 {
  --mb: 1px;
}

.mb--2 {
  --mb: 2px;
}

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

.mb--6 {
  --mb: 6px;
}

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

.mb--12 {
  --mb: 12px;
}

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

.mb--20 {
  --mb: 20px;
}

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

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

.mb--40 {
  --mb: 40px;
}

.mb--48 {
  --mb: clamp(40px, 4vw, 48px);
}

.mb--56 {
  --mb: clamp(40px, 4vw, 56px);
}

.mb--64 {
  --mb: clamp(40px, 5vw, 64px);
}

.mb--80 {
  --mb: clamp(40px, 5vw, 80px);
}

.mb--120 {
  --mb: clamp(40px, 8vw, 120px);
}

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

.mr--6 {
  --mr: 6px;
}

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

.mr--10 {
  --mr: 10px;
}

.mr--12 {
  --mr: 12px;
}

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

.mr--20 {
  --mr: 20px;
}

.mr--24 {
  --mr: 20px;
}

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

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

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

.ml--12 {
  --ml: 12px;
}

.ml--20 {
  --ml: 20px;
}

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

.ml--auto {
  --ml: auto;
}

/* vertical margin */
.m-block {
  --m-block: 0px;
  margin-block: var(--m-block);
}

.m-block--12 {
  --m-block: 12px;
}

/* padding */
.p {
  --padding: 0;
  padding: var(--padding);
}

.p--2 {
  --padding: 2px;
}

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

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

.p--20 {
  --padding: 20px;
}

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

.p--28 {
  --padding: 28px;
}

.p--32 {
  --padding: clamp(24px, 3vw, 32px);
}

.p--40 {
  --padding: clamp(24px, 4vw, 40px);
}

.p--48 {
  --padding: clamp(24px, 4vw, 48px);
}

/* vertical padding */
.p-block {
  --p-block: 0;
  padding-block: var(--p-block);
}

.p-block--4 {
  --p-block: 4px;
}

.p-block--8 {
  --p-block: 8px;
}

.p-block--12 {
  --p-block: 12px;
}

.p-block--16 {
  --p-block: 16px;
}

.p-block--18 {
  --p-block: 18px;
}

.p-block--20 {
  --p-block: 20px;
}

.p-block--24 {
  --p-block: 24px;
}

.p-block--28 {
  --p-block: 28px;
}

.p-block--32 {
  --p-block: clamp(24px, 3vw, 32px);
}

.p-block--48 {
  --p-block: clamp(40px, 4vw, 48px);
}

/* horizontal padding */
.p-inline {
  --p-inline: 0;
  padding-inline: var(--p-inline);
}

.p-inline--8 {
  --p-inline: 8px;
}

.p-inline--12 {
  --p-inline: 12px;
}

.p-inline--16 {
  --p-inline: 16px;
}

.p-inline--20 {
  --p-inline: clamp(16px, 2vw, 20px);
}

.p-inline--24 {
  --p-inline: clamp(16px, 2vw, 24px);
}

.p-inline--28 {
  --p-inline: clamp(16px, 3vw, 28px);
}

.p-inline--32 {
  --p-inline: clamp(24px, 3vw, 32px);
}

/* 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: 32px;
}

.pt--40 {
  --pt: 40px;
}

.pt--48 {
  --pt: clamp(40px, 4vw, 48px);
}

.pt--56 {
  --pt: clamp(40px, 4vw, 56px);
}

.pt--64 {
  --pt: clamp(40px, 5vw, 64px);
}

.pt--80 {
  --pt: clamp(40px, 5vw, 80px);
}

.pt--120 {
  --pt: clamp(40px, 8vw, 120px);
}

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

.pb--compensate {
  margin-bottom: calc(var(--pb) * -1) !important;
}

.pb--2 {
  --pb: 2px;
}

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

.pb--6 {
  --pb: 6px;
}

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

.pb--10 {
  --pb: 10px;
}

.pb--12 {
  --pb: 12px;
}

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

.pb--18 {
  --pb: 18px;
}

.pb--20 {
  --pb: 20px;
}

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

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

.pb--40 {
  --pb: 40px;
}

.pb--48 {
  --pb: clamp(40px, 4vw, 48px);
}

.pb--56 {
  --pb: clamp(40px, 4vw, 56px);
}

.pb--64 {
  --pb: clamp(40px, 5vw, 64px);
}

.pb--80 {
  --pb: clamp(40px, 5vw, 80px);
}

.pb--120 {
  --pb: clamp(40px, 8vw, 120px);
}

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

.pr--theme {
  --pr: var(--theme-page-width-padding);
}

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

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

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

.pr--20 {
  --pr: 20px;
}

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

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

.pr--40 {
  --pr: 40px;
}

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

.pl--theme {
  --pl: var(--theme-page-width-padding);
}

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

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

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

.pl--20 {
  --pl: 20px;
}

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

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