:root { --cream: #f7f2e8; --brown: #765a3e; --coral: #a75931; --green: #7f8464; --yellow: #f0df95; --brown-l-1: #a4917e; --brown-l-2: #d1c8bf; --brown-t-1: hsla(30, 17%, 78%, 0.33); --brown-t-2: hsla(30, 17%, 57%, 0.67); --coral-l-1: #c49076; --coral-l-2: #e2c8ba; --coral-t-1: hsla(20, 40%, 81%, 0.33); --coral-t-2: hsla(20, 40%, 62%, 0.67); --green-l-1: #aaad98; --green-l-2: #d4d6cb; --green-t-1: hsla(69, 12%, 82%, 0.33); --green-t-2: hsla(69, 12%, 64%, 0.67); --yellow-l-1: #f5eab8; --yellow-l-2: #faf4dc; --yellow-t-1: hsla(49, 75%, 92%, 0.33); --yellow-t-2: hsla(49, 75%, 84%, 0.67); --mint: #e0e2c0; --mint-l-1: #eaecd5; --mint-l-2: #f5f5ea; --mint-t-1: hsla(64, 37%, 94%, 0.33); --mint-t-2: hsla(64, 37%, 88%, 0.67); --blue: #ccd7d9; --blue-l-1: #dde4e6; --blue-l-2: #eef2f2; --blue-t-1: hsla(189, 15%, 94%, 0.33); --blue-t-2: hsla(189, 15%, 88%, 0.67); --orange: #f0e7d6; --orange-l-1: #f5efe4; --orange-l-2: #faf7f1; --orange-t-1: hsla(39, 46%, 96%, 0.33); --orange-t-2: hsla(39, 46%, 93%, 0.67); --text-2xs: clamp(0.61rem, calc(-0.00018518518518518534 * (100vw - 36rem) + 0.61rem), 0.59rem); --text-xs: clamp(0.77rem, calc(0.00018518518518518534 * (100vw - 36rem) + 0.77rem), 0.79rem); --text-s: clamp(0.96rem, calc(0.000833333333333334 * (100vw - 36rem) + 0.96rem), 1.05rem); --text-m: clamp(1.2rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.2rem), 1.4rem); --text-l: clamp(1.5rem, calc(0.003425925925925927 * (100vw - 36rem) + 1.5rem), 1.87rem); --text-xl: clamp(1.88rem, calc(0.005648148148148151 * (100vw - 36rem) + 1.88rem), 2.49rem); --text-2xl: clamp(2.34rem, calc(0.009074074074074075 * (100vw - 36rem) + 2.34rem), 3.32rem); --heading-2xs: clamp(1.31rem, calc(0.0019444444444444442 * (100vw - 36rem) + 1.31rem), 1.52rem); --heading-xs: clamp(1.64rem, calc(0.0035185185185185198 * (100vw - 36rem) + 1.64rem), 2.02rem); --heading-s: clamp(2.05rem, calc(0.005925925925925927 * (100vw - 36rem) + 2.05rem), 2.69rem); --heading-m: clamp(2.56rem, calc(0.009537037037037035 * (100vw - 36rem) + 2.56rem), 3.59rem); --heading-l: clamp(3.2rem, calc(0.01462962962962963 * (100vw - 36rem) + 3.2rem), 4.78rem); --heading-xl: clamp(4rem, calc(0.022037037037037036 * (100vw - 36rem) + 4rem), 6.38rem); --heading-2xl: clamp(5rem, calc(0.032407407407407406 * (100vw - 36rem) + 5rem), 8.5rem); --gap-2xs: clamp(0.82rem, calc(0.00018518518518518534 * (100vw - 36rem) + 0.82rem), 0.84rem); --gap-xs: clamp(1.02rem, calc(0.0010185185185185173 * (100vw - 36rem) + 1.02rem), 1.13rem); --gap-s: clamp(1.28rem, calc(0.002037037037037037 * (100vw - 36rem) + 1.28rem), 1.5rem); --gap-m: clamp(1.6rem, calc(0.003703703703703703 * (100vw - 36rem) + 1.6rem), 2rem); --gap-l: clamp(2rem, calc(0.0062037037037037035 * (100vw - 36rem) + 2rem), 2.67rem); --gap-xl: clamp(2.5rem, calc(0.00972222222222222 * (100vw - 36rem) + 2.5rem), 3.55rem); --gap-2xl: clamp(3.13rem, calc(0.014907407407407411 * (100vw - 36rem) + 3.13rem), 4.74rem); --pad-3xs: clamp(2.62rem, calc(0.0037962962962962937 * (100vw - 36rem) + 2.62rem), 3.03rem); --pad-2xs: clamp(3.28rem, calc(0.0070370370370370396 * (100vw - 36rem) + 3.28rem), 4.04rem); --pad-xs: clamp(4.1rem, calc(0.011851851851851855 * (100vw - 36rem) + 4.1rem), 5.38rem); --pad-s: clamp(5.12rem, calc(0.01907407407407407 * (100vw - 36rem) + 5.12rem), 7.18rem); --pad-m: clamp(6.4rem, calc(0.02935185185185185 * (100vw - 36rem) + 6.4rem), 9.57rem); --pad-l: clamp(8rem, calc(0.04398148148148148 * (100vw - 36rem) + 8rem), 12.75rem); --pad-xl: clamp(10rem, calc(0.06481481481481481 * (100vw - 36rem) + 10rem), 17rem); --pad-2xl: clamp(12.5rem, calc(0.09407407407407407 * (100vw - 36rem) + 12.5rem), 22.66rem); --radius-xs: clamp(0.4rem, calc(0.0018518518518518515 * (100vw - 36rem) + 0.4rem), 0.6rem); --radius-s: clamp(0.5rem, calc(0.0027777777777777783 * (100vw - 36rem) + 0.5rem), 0.8rem); --radius-m: clamp(0.63rem, calc(0.004074074074074075 * (100vw - 36rem) + 0.63rem), 1.07rem); --radius-l: clamp(0.78rem, calc(0.005925925925925925 * (100vw - 36rem) + 0.78rem), 1.42rem); --radius-xl: clamp(0.98rem, calc(0.008425925925925925 * (100vw - 36rem) + 0.98rem), 1.89rem); --radius-2xl: clamp(1.22rem, calc(0.012129629629629627 * (100vw - 36rem) + 1.22rem), 2.53rem);}.text-2xs { font-size: var(--text-2xs); }.text-xs { font-size: var(--text-xs); }.text-s { font-size: var(--text-s); }.text-m { font-size: var(--text-m); }.text-l { font-size: var(--text-l); }.text-xl { font-size: var(--text-xl); }.text-2xl { font-size: var(--text-2xl); }.h-2xs { font-size: var(--heading-2xs); }.h-xs { font-size: var(--heading-xs); }.h-s { font-size: var(--heading-s); }.h-m { font-size: var(--heading-m); }.h-l { font-size: var(--heading-l); }.h-xl { font-size: var(--heading-xl); }.h-2xl { font-size: var(--heading-2xl); }.gap-gap-2xs { gap: var(--gap-2xs); }.gap-gap-xs { gap: var(--gap-xs); }.gap-gap-s { gap: var(--gap-s); }.gap-gap-m { gap: var(--gap-m); }.gap-gap-l { gap: var(--gap-l); }.gap-gap-xl { gap: var(--gap-xl); }.gap-gap-2xl { gap: var(--gap-2xl); }.pad-3xs { padding: var(--pad-3xs); }.pad-2xs { padding: var(--pad-2xs); }.pad-xs { padding: var(--pad-xs); }.pad-s { padding: var(--pad-s); }.pad-m { padding: var(--pad-m); }.pad-l { padding: var(--pad-l); }.pad-xl { padding: var(--pad-xl); }.pad-2xl { padding: var(--pad-2xl); }.pad-block-3xs { padding-block: var(--pad-3xs); }.pad-block-2xs { padding-block: var(--pad-2xs); }.pad-block-xs { padding-block: var(--pad-xs); }.pad-block-s { padding-block: var(--pad-s); }.pad-block-m { padding-block: var(--pad-m); }.pad-block-l { padding-block: var(--pad-l); }.pad-block-xl { padding-block: var(--pad-xl); }.pad-block-2xl { padding-block: var(--pad-2xl); }.pad-inline-3xs { padding-inline: var(--pad-3xs); }.pad-inline-2xs { padding-inline: var(--pad-2xs); }.pad-inline-xs { padding-inline: var(--pad-xs); }.pad-inline-s { padding-inline: var(--pad-s); }.pad-inline-m { padding-inline: var(--pad-m); }.pad-inline-l { padding-inline: var(--pad-l); }.pad-inline-xl { padding-inline: var(--pad-xl); }.pad-inline-2xl { padding-inline: var(--pad-2xl); }.radius-xs { border-radius: var(--radius-xs); }.radius-s { border-radius: var(--radius-s); }.radius-m { border-radius: var(--radius-m); }.radius-l { border-radius: var(--radius-l); }.radius-xl { border-radius: var(--radius-xl); }.radius-2xl { border-radius: var(--radius-2xl); }