/* ================================================
   TopPage_Mobile_Small
================================================ */

@media (max-width:430px){

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

.hero{

    margin-top:120px;

    height:36vh;

}

.hero-copy{

    font-size:15px;

    margin:12px 0;

}

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

.info-bar{

    padding:15px 12px;

}

.info-inner{

    display:flex;

    flex-direction:column;

    gap:15px;

    text-align:center;

}

.info-left{

    flex-direction:column;

    gap:10px;

}

.info-title{

    font-size:11px;

}

.info-status{

    font-size:16px;

}

.info-btn{

    width:100%;

    padding:12px;

    font-size:14px;

}

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

.slider-btn{

    width:34px;

    height:34px;

    font-size:16px;

}

.prev{

    left:8px;

}

.next{

    right:8px;

}

.slider-dots{

    left:50%;

    bottom:15px;

    right:auto;

    transform:translateX(-50%);

}

.dot{

    width:8px;

    height:8px;

}

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

.info-cards{

    padding:35px 12px;

}

.cards-container{

    grid-template-columns:1fr;

    gap:18px;

}

.info-card{

    flex-direction:column;

}

.info-card img{

    width:100%;

    height:180px;

}

.card-text{

    padding:15px;

}

.card-text h3{

    font-size:18px;

}

.card-text p{

    font-size:13px;

    line-height:1.5;

}

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

.events{

    padding:40px 12px;

}

.event-title{

    font-size:20px;

}

.event-track{

    gap:15px;

}

.event-card{

    min-width:220px;

}

.event-card img{

    height:150px;

}

.event-info{

    padding:15px;

}

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

.next-event{

    padding:40px 12px;

}

.next-event-container{

    flex-direction:column;

}

.next-event-image img{

    width:100%;

    height:180px;

}

.next-event-info{

    padding:18px;

}

.event-buttons{

    display:flex;

    flex-direction:column;

    gap:10px;

}

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

.cta-section{

    padding:40px 12px;

}

.cta-title{

    font-size:20px;

}

.cta-container{

    flex-direction:column;

    gap:20px;

    text-align:center;

}

.cta-image img{

    max-width:100%;

}

.cta-icons{

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:13px;

}

.cta-btn{

    width:100%;

    padding:12px;

    font-size:15px;

}

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

.related{

    padding:30px 12px;

}

.related-container{

    grid-template-columns:1fr;

    gap:10px;

}

.related-item{

    padding:10px;

}

.related-item img{

    width:90px;

    height:60px;

}

.related-item span{

    font-size:13px;

}

.arrow{

    font-size:18px;

}

}