:root {
    --site-width: 1440px;
    --site-padding-horizontal: 80px;
    --site-padding-vertical: 80px;

    --site-logo-height: 64px;

    --navigation-height-default: 100px;
    --navigation-height-minimum: 56px;
    --navigation-height-scroll: var(--navigation-height-default);

    --typography-font-size-p: 24px;
    --typography-font-size-p-medium: 20px;
    --typography-font-size-h1: 52px;
    --typography-font-size-h2: 48px;
    --typography-font-size-h3: 40px;
    --typography-font-size-h4: 36px;
    --typography-font-size-h5: 28px;
    --typography-font-size-h6: 24px;

    --ui-button-height: 64px;

    --report-grid-gap: 36px;

    @media (width <= 1440px) {
        --site-width: 100%;
    }

    @media (width <= 1200px) {
        --site-logo-height: 48px;
        --site-padding-horizontal: 60px;
        --navigation-height-default: 80px;
        --navigation-height-scroll: 80px;
        --report-grid-gap: 32px;
    }

    @media (width <= 992px) {
        --typography-font-size-p: 22px;
        --typography-font-size-p-medium: 20px;
        --typography-font-size-h2: 38px;
        --typography-font-size-h4: 34px;
        --typography-font-size-h5: 26px;
        --typography-font-size-h6: 22px;

        --site-padding-vertical: 60px;

        --report-grid-gap: 24px;
    }

    @media (width <= 768px) {
        --typography-font-size-p: 20px;
        --typography-font-size-p-medium: 18px;
        --typography-font-size-h2: 36px;
        --typography-font-size-h4: 32px;
        --typography-font-size-h5: 24px;
        --typography-font-size-h6: 20px;

        --site-padding-horizontal: 40px;
        --site-padding-vertical: 40px;
        --site-logo-height: 32px;
        --navigation-height-default: var(--navigation-height-minimum);
        --navigation-height-scroll: var(--navigation-height-minimum);

        --ui-button-height: 56px;

        --report-grid-gap: 16px;
    }

    @media (width <= 576px) {
        --typography-font-size-p: 18px;
        --typography-font-size-p-medium: 18px;
        --typography-font-size-h2: 26px;
        --typography-font-size-h4: 22px;
        --typography-font-size-h5: 20px;
        --typography-font-size-h6: 18px;

        --site-padding-horizontal: 20px;

        --ui-button-height: 48px;
    }

    @media (width <= 440px) {
        /*--xs*/
    }

    @media (width <= 320px) {
        --typography-font-size-p: 16px;
        --typography-font-size-p-medium: 16px;
        --typography-font-size-h2: 24px;
        --typography-font-size-h4: 20px;
        --typography-font-size-h5: 18px;
        --typography-font-size-h6: 16px;
    }
}

.scroll-detected {
    --navigation-height-scroll: var(--navigation-height-minimum);
    --site-logo-height: 32px;
}