/* ==========================================
   QONPEO FESTIVAL
   RESPONSIVE.CSS
========================================== */

/* ---------- 1400px ---------- */

@media(max-width:1400px){

.hero h1{
font-size:95px;
}

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

}

/* ---------- 1200px ---------- */

@media(max-width:1200px){

.navbar{
padding:20px 5%;
}

.hero{
padding:0 5%;
}

.hero h1{
font-size:78px;
}

.hero-tag{
font-size:13px;
letter-spacing:6px;
}

.hero-date{
font-size:22px;
}

.section-header h2{
font-size:58px;
}

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

.lineup-card.featured{
grid-row:auto;
min-height:380px;
}

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

.ticket-card{
padding:35px;
}

.footer-top{
grid-template-columns:repeat(2,1fr);
gap:50px;
}

}

/* ---------- Tablet ---------- */

@media(max-width:992px){

nav{
display:none;
}

.hero{
justify-content:center;
text-align:center;
padding:0 30px;
}

.hero-content{
max-width:700px;
}

.hero h1{
font-size:62px;
}

.hero-date{
font-size:20px;
}

.hero-location{
font-size:15px;
}

.btn-primary{
width:260px;
margin:auto;
}

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

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

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

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

.logo img{
width:42px;
}

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

.hero{
padding:0 25px;
}

.hero h1{
font-size:46px;
letter-spacing:3px;
}

.hero-tag{
font-size:12px;
letter-spacing:3px;
line-height:1.8;
}

.hero-date{
font-size:18px;
}

.hero-location{
font-size:14px;
letter-spacing:2px;
}

.btn-primary{
width:100%;
max-width:280px;
padding:16px;
}

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

.section-header{
margin-bottom:50px;
}

.section-header h2{
font-size:42px;
}

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

.lineup-card{
min-height:250px;
}

.lineup-card.featured{
min-height:320px;
}

.moments-grid{
grid-template-columns:1fr;
grid-auto-rows:220px;
}

.moment.large{
grid-row:auto;
}

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

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

.footer-top{
grid-template-columns:1fr;
text-align:center;
}

.footer-brand img{
margin:auto auto 20px;
}

}

/* ---------- Small Phones ---------- */

@media(max-width:480px){

.navbar{
padding:18px 20px;
}

.hero h1{
font-size:34px;
}

.hero-tag{
font-size:11px;
letter-spacing:2px;
}

.hero-date{
font-size:16px;
}

.hero-location{
font-size:13px;
}

.stat h2{
font-size:38px;
}

.section-header h2{
font-size:34px;
}

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

}