/* ================================================
   TopPage_Tablet
================================================ */

@media (min-width:821px) and (max-width:1024px){

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

.hero{

    margin-top:145px;

    height:65vh;

}

.hero-copy{

    font-size:18px;

    margin:12px 0;

}

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

.info-bar{

    padding:22px 18px;

}

.info-inner{

    max-width:900px;

    gap:15px;

}

.info-left{

    gap:18px;

}

.info-title{

    font-size:12px;

}

.info-status{

    font-size:18px;

}

.info-btn{

    padding:12px 22px;

    font-size:15px;

}

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

.slider-btn{

    width:45px;

    height:45px;

    font-size:22px;

}

.prev{

    left:15px;

}

.next{

    right:15px;

}

.slider-dots{

    right:50%;

    transform:translateX(50%);

    bottom:25px;

}

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

.info-cards{

    padding:50px 20px;

}

.cards-container{

    max-width:900px;

    gap:25px;

}

.info-card{

    flex-direction:column;

}

.info-card img{

    width:100%;

    height:200px;

}

.card-text{

    padding:18px;

}

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

.events{

    padding:60px 20px;

}

.event-title{

    font-size:24px;

}

.event-slider{

    max-width:900px;

}

.event-track{

    gap:20px;

}

.event-card{

    min-width:260px;

}

.event-card img{

    height:170px;

}

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

.next-event{

    padding:60px 20px;

}

.next-event-container{

    flex-direction:column;

    max-width:900px;

}

.next-event-image img{

    width:100%;

    height:260px;

}

.next-event-info{

    padding:25px;

}

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

.cta-section{

    padding:60px 20px;

}

.cta-container{

    flex-direction:column;

    gap:30px;

    text-align:center;

}

.cta-image img{

    max-width:100%;

}

.cta-icons{

    justify-content:center;

}

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

.related{

    padding:40px 20px;

}

.related-container{

    max-width:900px;

    grid-template-columns:1fr;

    gap:15px;

}

.related-item img{

    width:120px;

    height:75px;

}

.related-item span{

    font-size:15px;

}

}