/*  -------------------  ---------------------------------------------------------------- */
/*  -------------------  ---------------------------------------------------------------- */
/*  ROOT MEDIA PROJECTS  ---------------------------------------------------------------- */
/*  -------------------  ---------------------------------------------------------------- */
/*  -------------------  ---------------------------------------------------------------- */

/*  -------------------  ---------------------------------------------------------------- */
/*  ROOT MEDIA PROJECTS GAPS  ----------------------------------------------------------- */
/*  -------------------  ---------------------------------------------------------------- */

/*  ROOT MEDIA GLOBAL FIRST GAP  -------------------------------------------------------- */

@media (max-width: 1500px) and (min-width: 1201px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-2);
    }
}

@media (max-width: 1200px) and (min-width: 1001px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-3);
    }
}

@media (max-width: 1000px) and (min-width: 851px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-4);
    }
}

@media (max-width: 850px) and (min-width: 701px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-5);
    }
}

@media (max-width: 700px) and (min-width: 601px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-6);
    }
}

@media (max-width: 600px) and (min-width: 501px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-7);
    }
}

@media (max-width: 500px) and (min-width: 391px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-8);
    }
}

@media (max-width: 390px) and (min-width: 361px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-9);
    }
}

@media (max-width: 360px) {
    :root {
        --Global-First-Gap: var(--Global-First-Gap-10);
    }
}


/*  -------------------  ---------------------------------------------------------------- */
/*  ROOT MEDIA PROJECTS LIST  ----------------------------------------------------------- */
/*  -------------------  ---------------------------------------------------------------- */

/*  ROOT MEDIA PROJECTS LIST ITEM NAME CONTAINER WIDTH  --------------------------------- */

@media (max-width: 850px) {
    :root {
        --Projects-List-Item-Name-Container-Width: var(--Projects-List-Item-Name-Container-Width-2);
        --Projects-List-Item-Year-Container-Width: var(--Projects-List-Item-Year-Container-Width-2);
    }
}