/**
* Grid variables
*/

:root{
    --site-gutter: 64px;
    --column-gap: 24px;
    --row-spacing: 104px;  /* (soms 94, 64 of 48px) */
    --container-width: 100svw;
}

: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);


    --overlay-height: max(5rem, calc(5 * var(--su)));
    --scroll-margin: var(--pk-header-height);
}

/* Relative scaling */
body.relative-scaling {
    --pk-container-width: var(--container-width);
    --global-row-spacing: var(--pk-row-spacing);
    --pk-column-gap: calc((var(--column-gap) / 16px) * var(--su));
    --pk-row-spacing: max(4rem, calc((var(--row-spacing) / 16px) * var(--su)));
    --pk-site-gutter: calc((var(--site-gutter) / 16px) * var(--su));
    --pk-text-font-size: max(1rem, var(--su));
}

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

}

@media only screen and (max-width: 992px){

}

@media only screen and (max-width: 992px){
    
    body.relative-scaling {
        --pk-site-gutter: 1.5rem !important;
    }

}