/* ================================================
   TopPage_Mobile
================================================ */

@media (min-width:431px) and (max-width:600px){

/* ================================================
Hero
================================================ */

.hero{

    margin-top:130px;

    height:42vh;

}

.hero-copy{

    font-size:16px;

    margin:14px 0;

}

/* ================================================
Info Bar
================================================ */

.info-bar{

    padding:18px 15px;

}

.info-inner{

    display:flex;

    flex-direction:column;

    gap:18px;

    text-align:center;

}

.info-left{

    flex-direction:column;

    gap:12px;

}

.info-title{

    font-size:12px;

}

.info-status{

    font-size:18px;

}

.info-btn{

    width:100%;

    max-width:260px;

    margin:auto;

    padding:12px;

    font-size:15px;

}

/* ================================================
Hero Slider
================================================ */

.slider-btn{

    width:38px;

    height:38px;

    font-size:18px;

}

.prev{

    left:10px;

}

.next{

    right:10px;

}

.slider-dots{

    left:50%;

    right:auto;

    bottom:18px;

    transform:translateX(-50%);

}

/* ================================================
Info Cards
================================================ */

.info-cards{

    padding:40px 15px;

}

.cards-container{

    grid-template-columns:1fr;

    gap:20px;

}

.info-card{

    flex-direction:column;

}

.info-card img{

    width:100%;

    height:200px;

}

.card-text{

    padding:18px;

}

.card-text h3{

    font-size:20px;

}

.card-text p{

    font-size:14px;

}

/* ================================================
Events
================================================ */

.events{

    padding:50px 15px;

}

.event-title{

    font-size:22px;

}

.event-track{

    gap:18px;

}

.event-card{

    min-width:240px;

}

.event-card img{

    height:160px;

}

/* ================================================
Next Event
================================================ */

.next-event{

    padding:50px 15px;

}

.next-event-container{

    flex-direction:column;

}

.next-event-image img{

    width:100%;

    height:220px;

}

.next-event-info{

    padding:20px;

}

.event-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.detail-btn,
.reserve-btn{

    text-align:center;

}

/* ================================================
CTA
================================================ */

.cta-section{

    padding:50px 15px;

}

.cta-title{

    font-size:22px;

}

.cta-container{

    flex-direction:column;

    text-align:center;

    gap:25px;

}

.cta-image img{

    max-width:100%;

}

.cta-icons{

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}

.cta-btn{

    width:100%;

    max-width:260px;

    text-align:center;

}

/* ================================================
Related
================================================ */

.related{

    padding:35px 15px;

}

.related-container{

    grid-template-columns:1fr;

    gap:12px;

}

.related-item{

    padding:12px;

}

.related-item img{

    width:100px;

    height:70px;

}

.related-item span{

    font-size:14px;

}

}