@media (max-width:1200px){

.grid{
grid-template-columns:repeat(3,1fr);
}

}

@media (max-width:992px){

header{
padding:0 5%;
}

.hero{
grid-template-columns:1fr;
text-align:center;
gap:50px;
}

.about{
grid-template-columns:1fr;
}

.cart-item{
grid-template-columns:1fr;
text-align:center;
}

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

}

@media (max-width:768px){

header{
height:auto;
padding:20px;
flex-direction:column;
gap:20px;
}

nav{
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.hero{
padding-top:180px;
}

.hero-text h1{
font-size:45px;
}

.products h2,
.about-page h1,
.checkout h1,
.contact-page h1{
font-size:34px;
}

.grid{
grid-template-columns:1fr;
}

.card img{
height:340px;
}

.buttons{
flex-direction:column;
}

.about{
padding:60px 5%;
}

.about div{
padding:30px;
}

}

@media (max-width:480px){

.logo{
font-size:22px;
letter-spacing:4px;
}

.hero-text h1{
font-size:34px;
letter-spacing:4px;
}

.hero-text p{
letter-spacing:4px;
}

.btn,
.checkout-btn,
.continue-btn{
width:100%;
}

.quantity{
justify-content:center;
}

.card img{
height:300px;
}

.products,
.cart-page,
.checkout,
.contact-page,
.about-page{
padding-left:20px;
padding-right:20px;
}

footer{
font-size:11px;
padding:25px;
}

}