:root{
    --container-width: 100%;
    --site-gutter: 80px;
    --column-gap: 24px;
    --row-spacing: 120px;
    --space-1: max(.5rem, calc(.5 * var(--su)));
    --space-2: max(.75rem, calc(.75 * var(--su)));
    --space-3: max(1rem, calc(1 * var(--su)));
    --space-4: max(1.5rem, calc(1.5 * var(--su)));
    --space-5: max(2rem, calc(2 * var(--su)));
    --space-6: max(3rem, calc(3 * var(--su)));
    --radius-sm: max(.5rem, calc(.5 * var(--su)));
    --radius-md: max(.75rem, calc(.75 * var(--su)));
    --focus-ring: 0 0 0 3px rgba(0, 142, 204, .28);
}

/**
* Relative scaling
*/

:root{
    --pk-container-width: var(--container-width);
    --pk-site-gutter: var(--site-gutter);
    --pk-column-gap: var(--column-gap);
    --pk-row-spacing: var(--row-spacing);
}

body.relative-scaling{
    --pk-column-gap: calc((var(--column-gap) / 16px) * var(--su));
    --pk-row-spacing: calc((var(--row-spacing) / 16px) * var(--su));
    --pk-site-gutter: calc((var(--site-gutter) / 16px) * var(--su));
    --pk-text-font-size: max(var(--text-mobile-font-size), calc((var(--text-desktop-font-size) / 16px) * var(--su)));
}

@media only screen and (min-width: 993px){

}

@media only screen and (max-width: 992px){
    :root { --site-gutter: 32px; }
}

@media only screen and (max-width: 767px){
    
    body.relative-scaling {
        --pk-site-gutter: 1.25rem;
    }

    :root { --site-gutter: 20px; }

}