/* 全局设置 */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1440,18,1.25,5,1,&s=0.75|0.5,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Space 2xs: 8px → 9px */
  --space-2xs: clamp(0.5rem, 0.4821rem + 0.0893vi, 0.5625rem);
  /* Space xs: 12px → 14px */
  --space-xs: clamp(0.75rem, 0.7143rem + 0.1786vi, 0.875rem);
  /* Space s: 16px → 18px */
  --space-s: clamp(1rem, 0.9643rem + 0.1786vi, 1.125rem);
  /* Space m: 24px → 27px */
  --space-m: clamp(1.5rem, 1.4464rem + 0.2679vi, 1.6875rem);
  /* Space l: 32px → 36px */
  --space-l: clamp(2rem, 1.9286rem + 0.3571vi, 2.25rem);
  /* Space xl: 48px → 54px */
  --space-xl: clamp(3rem, 2.8929rem + 0.5357vi, 3.375rem);
  /* Space 2xl: 64px → 72px */
  --space-2xl: clamp(4rem, 3.8571rem + 0.7143vi, 4.5rem);
  /* Space 3xl: 96px → 108px */
  --space-3xl: clamp(6rem, 5.7857rem + 1.0714vi, 6.75rem);

  /* One-up pairs */
  /* Space 2xs-xs: 8px → 14px */
  --space-2xs-xs: clamp(0.5rem, 0.3929rem + 0.5357vi, 0.875rem);
  /* Space xs-s: 12px → 18px */
  --space-xs-s: clamp(0.75rem, 0.6429rem + 0.5357vi, 1.125rem);
  /* Space s-m: 16px → 27px */
  --space-s-m: clamp(1rem, 0.8036rem + 0.9821vi, 1.6875rem);
  /* Space m-l: 24px → 36px */
  --space-m-l: clamp(1.5rem, 1.2857rem + 1.0714vi, 2.25rem);
  /* Space l-xl: 32px → 54px */
  --space-l-xl: clamp(2rem, 1.6071rem + 1.9643vi, 3.375rem);
  /* Space xl-2xl: 48px → 72px */
  --space-xl-2xl: clamp(3rem, 2.5714rem + 2.1429vi, 4.5rem);
  /* Space 2xl-3xl: 64px → 108px */
  --space-2xl-3xl: clamp(4rem, 3.2143rem + 3.9286vi, 6.75rem);


}
/* 间距 */

.gap--2 {
    gap: var(--space-2xs-xs);
}
.gap--1 {
    gap: var(--space-xs-s);
}
.gap-0 {
    gap: var(--space-s-m);
}
.gap-1 {
    gap: var(--space-m-l);
}
.gap-2 {
    gap: var(--space-l-xl);
}
.gap-3 {
    gap: var(--space-xl-2xl);
}
.gap-4 {
    gap: var(--space-2xl-3xl);
}

/* 内边距-整体 */

.p--2 {
    padding: var(--space-2xs-xs);
}
.p--1 {
    padding: var(--space-xs-s);
}
.p-0 {
    padding: var(--space-s-m);
}
.p-1 {
    padding: var(--space-m-l);
}
.p-2 {
    padding: var(--space-l-xl);
}
.p-3 {
    padding: var(--space-xl-2xl);
}
.p-4 {
    padding: var(--space-2xl-3xl);
}

/* 内边距-左右 */

.p-lr--2 {
    padding-left: var(--space-2xs-xs);
    padding-right: var(--space-2xs-xs);
}
.p-lr--1 {
    padding-left: var(--space-xs-s);
    padding-right: var(--space-xs-s);
}
.p-lr-0 {
    padding-left: var(--space-s-m);
    padding-right: var(--space-s-m);
}
.p-lr-1 {
    padding-left: var(--space-m-l);
    padding-right: var(--space-m-l);
}
.p-lr-2 {
    padding-left: var(--space-l-xl);
    padding-right: var(--space-l-xl);
}
.p-lr-3 {
    padding-left: var(--space-xl-2xl);
    padding-right: var(--space-xl-2xl);
}
.p-lr-4 {
    padding-left: var(--space-2xl-3xl);
    padding-right: var(--space-2xl-3xl);
}

/* 内边距-上-下 */

.p-tb--2 {
    padding-top: var(--space-2xs-xs);
    padding-bottom: var(--space-2xs-xs);
}
.p-tb--1 {
    padding-top: var(--space-xs-s);
    padding-bottom: var(--space-xs-s);
}
.p-tb-0 {
    padding-top: var(--space-s-m);
    padding-bottom: var(--space-s-m);
}
.p-tb-1 {
    padding-top: var(--space-m-l);
    padding-bottom: var(--space-m-l);
}
.p-tb-2 {
    padding-top: var(--space-l-xl);
    padding-bottom: var(--space-l-xl);
}
.p-tb-3 {
    padding-top: var(--space-xl-2xl);
    padding-bottom: var(--space-xl-2xl);
}
.p-tb-4 {
    padding-top: var(--space-2xl-3xl);
    padding-bottom: var(--space-2xl-3xl);
}

/* 外边距-下 */

.m-b--2 {
    margin-bottom: var(--space-2xs-xs);
}
.m-b--1 {
    margin-bottom: var(--space-xs-s);
}
.m-b-0 {
    margin-bottom: var(--space-s-m);
}
.m-b-1 {
    margin-bottom: var(--space-m-l);
}
.m-b-2 {
    margin-bottom: var(--space-l-xl);
}
.m-b-3 {
    margin-bottom: var(--space-xl-2xl);
}
.m-b-4 {
    margin-bottom: var(--space-2xl-3xl);
}

/* 外边距-上 */

.m-t--2 {
    margin-top: var(--space-2xs-xs);
}
.m-t--1 {
    margin-top: var(--space-xs-s);
}
.m-t-0 {
    margin-top: var(--space-s-m);
}
.m-t-1 {
    margin-top: var(--space-m-l);
}
.m-t-2 {
    margin-top: var(--space-l-xl);
}
.m-t-3 {
    margin-top: var(--space-xl-2xl);
}
.m-t-4 {
    margin-top: var(--space-2xl-3xl);
}