/* CSS rules for larger views */
@media (min-width: 640px) {
    nav ul {
      display: flex;
    }
    nav ul li {
      flex: 1 1 100%;
    }
    

    .card{
        width: 26rem;
        grid-column: 1 / 2;
        padding: 2rem;       }
          
   .card2{
    grid-column: 2 / 3;
    padding: 2rem;
    
   }

       
   .card3{
    grid-column: 1 / 3;
    padding: 1rem;
   }
   
   #mainMenu {
    display: block;
  }

  #hamburgerButton{
    display: none;
  }

 .hero{
  width: 767px;
 }

}