:root{
    /*  ---------- -------------------------------------------- */
    /*  ---------- -------------------------------------------- */
    /*  ROOT BASIC -------------------------------------------- */
    /*  ---------- -------------------------------------------- */
    /*  ---------- -------------------------------------------- */


    /*  ROOT SITE MARGINS ------------------------------------- */
    --Site-Margins-1: 36px;
    --Site-Margins-2: 20px;
    --Site-Margins: var(--Site-Margins-1);

    /*  ROOT SITE COLUMN GAP ---------------------------------- */
    --Column-Gap-1: 20px;
    --Column-Gap-2: 10px;
    --Column-Gap: var(--Column-Gap-1);

    /*  ROOT SITE CONTENT WIDTH ------------------------------- */
    --Site-Content-Width: calc(100vw - (2 * (var(--Site-Margins))));
    
    /*  ROOT SITE 11 COLUMN WIDTH ----------------------------- */
    --Site-11-Column-Width: calc(((var(--Site-Content-Width)) - (10 * (var(--Column-Gap)))) / 11);
    
    /*  ROOT SITE 12 COLUMN WIDTH ----------------------------- */
    --Site-12-Column-Width: calc(((var(--Site-Content-Width)) - (11 * (var(--Column-Gap)))) / 12);
    
    /*  ROOT SITE 24 COLUMN WIDTH ----------------------------- */
    --Site-24-Column-Width: calc(((var(--Site-Content-Width)) - (23 * (var(--Column-Gap)))) / 24);
}