/* responsive.css */

@media (max-width:1100px){

.container{
    padding:18px 24px;
}

nav{
    gap:18px;
}

.hero-title h1{
    font-size:2.6rem;
}

.store img{
    height:430px;
}

}

@media (max-width:900px){

.container{
    flex-direction:column;
    gap:15px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
}

.stores{
    grid-template-columns:1fr;
    padding:0 18px 40px;
}

.hero{
    padding-top:190px;
}

.hero-title h1{
    font-size:2.2rem;
}

.intro{
    margin:30px 18px;
    padding:35px 24px;
}

}

@media (max-width:600px){

.logo{
    height:60px;
}

nav{
    gap:12px;
    font-size:.92rem;
}

.hero-title h1{
    font-size:1.8rem;
}

.hero-title p{
    font-size:1rem;
    padding:0 18px;
}

.store img{
    height:320px;
}

.overlay{
    padding:22px;
}

.overlay h2{
    font-size:1.5rem;
}

.overlay a{
    width:100%;
    text-align:center;
}

.intro h2{
    font-size:1.6rem;
}

body{
    overflow-x:hidden;
}

}