/*
        -- grid-col-1 to grid-col-12 --------- // Default for Medium & Extra Large Screens (Above 1020px) //
        -- grid-col-md-1 to grid-col-md-6 ---- // Small & Medium Screens - Mobile and small screen tablets (600px to 1020px) //
        -- grid-col-lg-1 to grid-col-lg-12 --- // Large Screens tablet and small screen PC (1021px to 1199.98px) //
    */

    :root {
        --grid-col: 8.3333%; /* 100% / 12 columns */
    }

    /* Default Grid for Medium & Extra Large Screens */
    .grid-col-1 { width: var(--grid-col); }
    .grid-col-2 { width: calc(2 * var(--grid-col)); }
    .grid-col-3 { width: calc(3 * var(--grid-col)); }
    .grid-col-4 { width: calc(4 * var(--grid-col)); }
    .grid-col-5 { width: calc(5 * var(--grid-col)); }
    .grid-col-6 { width: calc(6 * var(--grid-col)); }
    .grid-col-7 { width: calc(7 * var(--grid-col)); }
    .grid-col-8 { width: calc(8 * var(--grid-col)); }
    .grid-col-9 { width: calc(9 * var(--grid-col)); }
    .grid-col-10 { width: calc(10 * var(--grid-col)); }
    .grid-col-11 { width: calc(11 * var(--grid-col)); }
    .grid-col-12 { width: 100%; }
/*  ----------------------------------------------------------------------  */



    /* 
    	*Small & Medium Screens (Max 1020px) - 
    	*Mobile and small screen tablet
    	*md- Mobile Device

	 */
    @media (max-width: 1020px) {

        :root {
            --grid-col: 16.6667%; /* 100% / 6 columns */
        }

        .grid-col-md-1 { width: var(--grid-col-md) !important; }
        .grid-col-md-2 { width: calc(2 * var(--grid-col)) !important; }
        .grid-col-md-3 { width: calc(3 * var(--grid-col)) !important; }
        .grid-col-md-4 { width: calc(4 * var(--grid-col)) !important; }
        .grid-col-md-5 { width: calc(5 * var(--grid-col)) !important; }
        .grid-col-md-6 { width: 100% !important; }
    }
/*  ----------------------------------------------------------------------  */


    /* 
    	*Large Screens (1021px to 1199.98px)
    	* Small Screen PC
	*/
    @media (min-width: 1021px) and (max-width: 1199.98px) {

    	:root {
    	    --grid-col: 8.3333%; /* 100% / 12 columns */
    	}

        .grid-col-lg-1 { width: var(--grid-col); }
        .grid-col-lg-2 { width: calc(2 * var(--grid-col)) !important; }
        .grid-col-lg-3 { width: calc(3 * var(--grid-col)) !important; }
        .grid-col-lg-4 { width: calc(4 * var(--grid-col)) !important; }
        .grid-col-lg-5 { width: calc(5 * var(--grid-col)) !important; }
        .grid-col-lg-6 { width: calc(6 * var(--grid-col)) !important; }
        .grid-col-lg-7 { width: calc(7 * var(--grid-col)) !important; }
        .grid-col-lg-8 { width: calc(8 * var(--grid-col)) !important; }
        .grid-col-lg-9 { width: calc(9 * var(--grid-col)) !important; }
        .grid-col-lg-10 { width: calc(10 * var(--grid-col)) !important; }
        .grid-col-lg-11 { width: calc(11 * var(--grid-col)) !important; }
        .grid-col-lg-12 { width: 100% !important; }
    }
/*  ----------------------------------------------------------------------  */