@media(max-width:768px){


.logo a {

font-size:24px;

}



nav ul {

flex-direction:column;

}



.hero h1 {

font-size:38px;

}



.products {

grid-template-columns:
repeat(2,1fr);

}



}



@media(max-width:480px){


.products {

grid-template-columns:1fr;

}



.hero {

min-height:400px;

}



}

.menu-toggle{

display:none;

background:#b00000;

color:#fff;

border:0;

padding:10px;

font-size:20px;

}



@media(max-width:768px){


.menu-toggle{

display:block;

}


.main-menu{

display:none;

}


.main-menu.active{

display:block;

}


nav ul{

display:flex;

}


}