@supports (grid-area: auto) {

    
    @media screen and (min-width: 600px) { 
        .site {

            display: grid;
            grid-template-columns: 1fr 4fr 1fr; 
            grid-template-areas: 
                    "header header nav"
                    "nav-2 nav-2 nav-2"
                    ". main ."
                    ". footer .";

            .header-content {
                grid-area: header;
            }
        
            .main-content { 
                grid-area: main;
            }
        
            .footer-content { 
                grid-area: footer;
            }

            .nav-content { 
                grid-area: nav;
            }
            
            .nav-2 { 
                grid-area: nav-2;
            }
    }
    }
}