responsiveness

media queries

                
                    @media only screen and (max-width: 1280px) {
                        .grid-maxcols-4 {
                            grid-template-areas: "item1 item2 item3"
                            "item4 item4 item4";
                        }
                    }
                    
                    @media only screen and (max-width: 1024px) {
                        html {
                            font-size: 80%;
                        }
                        
                        .material-icons {
                            font-size: 140%;
                        }
                      
                        .grid-maxcols-2 {
                            grid-template-areas: "item1"
                            "item2";
                        }
                        
                        .grid-maxcols-3 {
                            grid-template-areas: "item1 item2"
                            "item3 item3";
                        }
                    
                        .grid-maxcols-4 {
                            grid-template-areas: "item1 item2"
                            "item3 item4";
                        }  
                    }
                    
                    @media only screen and (max-width: 768px) {
                        html {
                            font-size: 70%;
                        }
                        
                        .grid-maxcols-3 {
                            grid-template-areas: "item1"
                            "item2"
                            "item3";
                        }
                    
                        .grid-maxcols-4 {
                            grid-template-areas: "item1"
                            "item2"
                            "item3"
                            "item4";
                        }
                    }