/* Responsive rules */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr 320px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .about-inner{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}

@media (max-width:700px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .hero-inner{grid-template-columns:1fr}
  .hero-image{order:-1;margin-bottom:18px}
  .product-grid{grid-template-columns:1fr}
  .modal-content{grid-template-columns:1fr}
}