:root {

    /*==========================================================
        Media Breakpoints
    ==========================================================*/

    --width-breakpoint-mobile: 480px;
    --width-breakpoint-tablet: 850px;
    --width-breakpoint-desktop: 1024px;

    /*==========================================================
        Section Layout
    ==========================================================*/

    --section-padding-compact: 4rem;

    --section-padding-standard: 6rem;

    --section-padding-feature: 6rem;

    --section-padding-cta: 6rem;

    --section-padding-footer: 5rem;

    --section-padding-hero-top: 120px;

    --section-padding-hero-bottom: 96px;


    /*==========================================================
        Containers
    ==========================================================*/

    --container-narrow: 700px;
    --container-standard: 1200px;
    --container-wide: 1450px;

    /*==========================================================
        Radius
    ==========================================================*/

    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 2rem;

    /*==========================================================
        Spacing
    ==========================================================*/

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 6rem;
    --space-xxl: 7.5rem;

    @media (max-width: 1024px) {
        --space-xs: .25rem;
        --space-sm: .5rem;
        --space-md: 1rem;
        --space-lg: 2rem;
        --space-xl: 6rem;
        --space-xxl: 7.5rem;
    }

    @media (max-width: 1024px) {
        --space-xs: .25rem;
        --space-sm: .5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 4rem;
        --space-xxl: 5.5rem;
    }

    @media (width <= 850px) {
        --space-xs: .25rem;
        --space-sm: .5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 4rem;
        --space-xxl: 5.5rem;
    }


    /*==========================================================
        Motion
    ==========================================================*/

    --transition-fast: 150ms ease;
    --transition-default: 250ms ease;
    --transition-slow: 450ms ease;

    /*==========================================================
        Effects
    ==========================================================*/

    --blur-header: 18px;

    --shadow-soft:
        0 4px 20px rgb(0 0 0 / .08);

    --shadow-hover:
        0 12px 40px rgb(0 0 0 / 1);

}