@media (min-width: 300px) and (max-width: 920px) {

    /*BACKGROUND GRID*/

        .backgroundGrid {

            position: absolute;
            display: grid;
            grid-template-rows: 100vh 80vh;
            width: 100%;
            max-width: 100vw;
            overflow: hidden;

            transition: 1s ease;


        
        }

        

        /*BACKGROUND SECTIONS*/

            .firstSection {

                background: linear-gradient(

                    to bottom,
                    #202020,
                    #3F3F3F

                );

                transition: all 1s ease;
                

            }

            .secondSection {

                background: linear-gradient(

                    to top,
                    #818181,
                    #888888

                );

                transition: all 20s ease;

            }



        
        

}


@media (min-width: 920px) and (max-width: 2500px) {

    /*BACKGROUND GRID*/

        .backgroundGrid {

            position: absolute;
            display: grid;
            grid-template-columns: 55vw 45vw;
            width: 100%;
            max-width: 100vw;
            height: 100%;
            overflow: hidden;

            transition: 1s ease;


        
        }

        

        /*BACKGROUND SECTIONS*/

            .firstSection {

                background: linear-gradient(

                    to bottom,
                    #202020,
                    #3F3F3F

                );

                transition: all 1s ease;
                

            }

            .secondSection {

                background: linear-gradient(

                    to top,
                    #949494,
                    #565656

                );

                transition: all 20s ease;

            }



        
        

}