@media (min-width: 640px) {
    .heading-xxlarge {
        font-size: 77px;
        font-weight: 800;
    }
    .heading-xlarge {
        font-size: 64px;
        line-height: 64px;
        font-weight: 800;
    }
    .heading-large {
        font-size: 55px;
        font-weight: 800;
    }
    .heading-medium {
        font-size: 44px;
        font-weight: 800;
    }
    .heading-small {
        font-size: 35px;
        line-height: 37px;
        font-weight: 800;
    }
    .heading-xsmall {
        font-size: 28px;
        font-weight: 400;
    }
    .text-large {
        font-size: 28px;
        font-weight: 300;
    }
    .text-medium {
        font-size: 22px;
        font-weight: 300;
    }
    .text-base {
        font-size: 18px;
        font-weight: 300;
    }
    .text-small {
        font-size: 16px;
        font-weight: 300;
    }
}

@media (max-width: 640px) {
    .heading-xxlarge {
        font-size: 48px;
        font-weight: 800;
    }
    .heading-xlarge {
        font-size: 41px;
        line-height: 41px;
        font-weight: 800;
    }
    .heading-large {
        font-size: 32px;
        font-weight: 800;
    }
    .heading-medium {
        font-size: 29px;
        font-weight: 800;
    }
    .heading-small {
        font-size: 26px;
        line-height: 26px;
        font-weight: 800;
    }
    .heading-xsmall {
        font-size: 22.5px;
        font-weight: 400;
    }
    .text-large {
        font-size: 22.5px;
        font-weight: 300;
    }
    .text-medium {
        font-size: 20px;
        font-weight: 300;
    }
    .text-base {
        font-size: 18px;
        font-weight: 300;
    }
    .text-small {
        font-size: 16px;
        font-weight: 300;
    }
}

/* -------------------------------------------------------------------------- */
/*                                Figma export                                */
/* -------------------------------------------------------------------------- */

/* --heading--x-x-large---desktop-800: 77px;
--heading--x-x-large---tablet-800: 89px;
--heading--x-x-large---mobile--landscape-800: 48px;
--heading--x-x-large---mobile--portrait-800: 48px;
--heading--x-large---desktop-800: 64px;
--heading--x-large---tablet-800: 72px;
--heading--x-large---mobile--landscape-800: 41px;
--heading--x-large---mobile--portrait-800: 41px;
--heading--large--h1---desktop-800: 55px;
--heading--large--h1---tablet-800: 48px;
--heading--large--h1---mobile--landscape-800: 32px;
--heading--large--h1---mobile--portrait-800: 32px;
--heading--medium--h2---desktop-800: 44px;
--heading--medium--h2---tablet-800: 39px;
--heading--medium--h2---mobile--landscape-800: 29px;
--heading--medium--h2---mobile--portrait-800: 29px;
--heading--small--h3---desktop-800: 35px;
--heading--small--h3---tablet-800: 32px;
--heading--small--h3---mobile--landscape-800: 26px;
--heading--small--h3---mobile--portrait-800: 26px;
--heading--x-small--h4---desktop-400: 28px;
--heading--x-small--h4---tablet-400: 26px;
--heading--x-small--h4---mobile--landscape-400: 22.5px;
--heading--x-small--h4---mobile--portrait-400: 22.5px;
--heading--tiny--h5---desktop-800: 22.5px;
--heading--tiny--h5---tablet-800: 22px;
--heading--tiny--h5---mobile--landscape-800: 20px;
--heading--tiny--h5---mobile--portrait-800: 20px;
--heading--all--caps--h6---desktop-800: 16px;
--heading--all--caps--h6---tablet-800: 16px;
--heading--all--caps--h6---mobile--landscape-800: 16px;
--heading--all--caps--h6---mobile--portrait-800: 16px;
--text--large---desktop-800: 28px;
--text--large---desktop-300: 28px;
--text--large---tablet-800: 26px;
--text--large---tablet-300: 26px;
--text--large---mobile--landscape-800: 22.5px;
--text--large---mobile--landscape-800: 22.5px;
--text--large---mobile--portrait-800: 22.5px;
--text--large---mobile--portrait-300: 22.5px;
--text--medium---desktop-800: 22px;
--text--medium-----desktop-300: 22px;
--text--medium---tablet-800: 22px;
--text--medium---tablet-300: 22px;
--text--medium---mobile--landscape-800: 20px;
--text--medium---mobile--landscape-300: 20px;
--text--medium---mobile--portrait-800: 20px;
--text--medium---mobile--portrait-300: 20px;
--text--base---all--breakpoints-800: 18px;
--text--base---all--breakpoints-300: 18px;
--text--small---all--breakpoints-800: 16px;
--text--small---all--breakpoints-300: 16px;
--text--tiny---all--breakpoints-800: 14px;
--text--tiny---all--breakpoints-300: 14px;
--small--caps---small--caps-800: 16px;
--button---large: 16px;
--button---medium: 15px;
--button---small: 14px;
--link---nav: 15px;
--link---c-t-a: 14px;
--link---link: 18px;
--link-----footer: 14px;
--form-----label: 14px;
--form---checkbox--label: 14px;
--form---input: 15px;
--form-----input--placeholder: 15px;
--misc-----product--selection: 14px; */