@media(max-width:1000px){
      .grid{grid-template-columns:repeat(2,1fr)}
      .hero h1{font-size:36px}
      header{padding:12px 0}
    }
@media(max-width:760px){
    .container{padding:0 16px}
    .container,nav ul{flex-direction:column}
    nav ul{display:none}
    .menu-toggle{display:block}
    .hero .container{flex-direction:column-reverse;align-items:flex-start}
    .grid{grid-template-columns:1fr}
    .two-col{flex-direction:column}
}
@media (max-width: 900px){
    .hero-inner{flex-direction:column;}
    .hero-right{width:100%; padding:24px;}
    .hero-left{ padding:48px 24px;}
}