01-03 Grid Container Widths Variables (BVC)

Here we control how the font grows and adapts to screens.

Standard Container Widths

Container (CSS Class)	Mobile (Root)	Mobile LRG (Min `560px`)	`Tablet` (Min `760px`)	`Tablet` LRG (Min `1000px`)	`Desktop` SML (Min `1300px`)	`Desktop` MED (Min `1500px`)	`Desktop` LRG (Min `1800px`)
.gcw-xl	`100%`	`100%`	`100%`	`100%`	`1320px`	`1440px`	`1600px` (Alt: 1620px)
.gcw	`100%`	`100%`	720px	`960px`	`1140px`	`1140px`	`1320px` (Alt: `1440px`)
.gcw-m	`100%`	`100%`	`560px`	720px	`960px`	`960px`	`960px`
.gcw-s	`80%`	`500px`	`560px`	560px	`720px`	`720px`	`720px`

Standard Grid Container Widths

Container Width Variables

/*---------------------------------------------------------------------------
01-03 Grid Container Widths Variables (BVC) FRAMEWORK 2024-07-29
---------------------------------------------------------------------------*/
:root {

    --gcw-max-xl:   100%;
    --gcw-max:      100%;
    --gcw-max-m:    100%;
    --gcw-max-s:    80%;

}

    /* Mobile LRG */
    @media (min-width: 560px) {  
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      100%;
            --gcw-max-m:    100%;
            --gcw-max-s:    500px;
        }        
    }

    /* Tablet */
    @media (min-width: 760px) {
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      720px;
            --gcw-max-m:    560px;
            --gcw-max-s:    560px;
        }
    }

    /* Tablet LRG */
    @media (min-width: 1000px) { 
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      960px;
            --gcw-max-m:    720px;
            --gcw-max-s:    560px;
        }
    }

    /* Desktop SML */
    @media (min-width: 1300px) {
        :root {
            --gcw-max-xl:   1320px;
            --gcw-max:      1140px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }

    /* Desktop MED */
    @media (min-width: 1500px) {
        :root {
            --gcw-max-xl:   1440px;
            --gcw-max:      1140px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }

    /* Desktop LRG */
    @media (min-width: 1800px) {
        :root {
            --gcw-max-xl:   1600px;
            --gcw-max:      1320px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }