html
{
    --container: 1392px;
    --container-padding: calc((100vw - var(--container)) / 2);
    --scrollbarWidth: 17px;

    --c-surface-accent: #8D9265;
    --c-surface-accent-hovered: #434527;
    --c-surfice-accent-opacity: #8586aa4d;

    --c-text-accent: #8D9265;
    --c-text-accent-hovered: #434527;

    --c-surface-primary: #FAEDDD;
    --c-surface-primary-hovered: #C8AB89;
    --c-surface-subdued: #FAEDDD;
    --c-surface-subdued-hovered: #C8AB89;

    --c-surface-hero_banner: #2e3019;


    --c-surface-default: #fff;
    --c-text-dark: #1a1a1a;
    --c-text-subdued: #3f3f3f;
    --c-text-disabled: #808080;
    --c-text-white: #fff;

    --c-surface-dark: #1a1a1a;


    --c-success: #008060;
    --c-error: #d72c0d;

    --border-color: rgba(0, 0, 0, .03);
    --border-corner: 0;
    --g-24: 24px;
    --g-32: clamp(16px, calc(16px + (32 - 16) * ((100vw - 768px) / 1152)), 32px);
    --g-elements: clamp(8px, calc(8px + (24 - 8) * ((100vw - 768px) / 1152)), 24px);
    --g-content: clamp(24px, calc(24px + (40 - 24) * ((100vw - 768px) / 1152)), 48px);
    --g-section-inner: clamp(24px, calc(24px + (64 - 24) * ((100vw - 768px) / 1152)), 64px);
    --g-section: clamp(56px, calc(56px + (120 - 56) * ((100vw - 768px) / 1152)), 120px);
    --g-content_cards: clamp(32px, calc(32px + (118 - 32) * ((100vw - 768px) / 1152)), 118px);
    --g-section_double: clamp(64px, calc(64px + (236 - 64) * ((100vw - 768px) / 1152)), 236px);
    --fs-16: 16px;
    --fs-18: clamp(16px, calc(16px + (18 - 16) * ((100vw - 768px) / 1152)), 18px);
    --fs-19: clamp(18px, calc(18px + (20 - 18) * ((100vw - 768px) / 1152)), 20px);
    --fs-20: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / 1152)), 20px);
    --fs-24: clamp(18px, calc(18px + (24 - 18) * ((100vw - 768px) / 1152)), 24px);
    --fs-28: clamp(20px, calc(20px + (28 - 20) * ((100vw - 768px) / 1152)), 28px);
    --transition: .18s ease-in-out;
    scroll-behavior: initial;
}