:root {
    --breakpoint-sm: var(--default-breakpoint-sm);
    --breakpoint-md: var(--default-breakpoint-md);
    --breakpoint-lg: var(--default-breakpoint-lg);

    --max-content-width: var(--default-max-content-width);

    --typescale: var(--major-third);
    --min-typescale: var(--minor-second);

    --max-width-12: var(--max-content-width);
    --max-width-11: calc( var(--max-content-width) * (11/12) );
    --max-width-10: calc( var(--max-content-width) * (10/12) );
    --max-width-9: calc( var(--max-content-width) * (9/12) );
    --max-width-8: calc( var(--max-content-width) * (8/12) );
    --max-width-7: calc( var(--max-content-width) * (7/12) );
    --max-width-6: calc( var(--max-content-width) * (6/12) );
    --max-width-5: calc( var(--max-content-width) * (5/12) );
    --max-width-4: calc( var(--max-content-width) * (4/12) );
    --max-width-3: calc( var(--max-content-width) * (3/12) );
    --max-width-2: calc( var(--max-content-width) * (2/12) );
    --max-width-1: calc( var(--max-content-width) * (1/12) );

    --btn-bg-color: var(--primary-500);
    --btn-bg-color-hover: var(--primary-600);
    --btn-v-padding: var(--spacing-v-md);
    --btn-h-padding: var(--spacing-h-md);

    --secondary-btn-bg-color: var(--secondary-500);
    --secondary-btn-bg-color-hover: var(--secondary-600);
}