/* ==========================================
   EYESCODE HOME MOBILE
========================================== */


@media(max-width:700px) {
    
    
    .home-page {
        
        padding: 0 15px;
        
        overflow: hidden;
        
    }
    
    
    
    
    /* ==========================================
   TITULOS
========================================== */
    
    
    .section-title {
        
        gap: 10px;
        
        margin-bottom: 15px;
        
    }
    
    
    
    .section-title h2 {
        
        font-size: 20px;
        
    }
    
    
    
    /* ==========================================
   TELÃO LIVE
========================================== */
    
    
    .featured-live {
        
        min-height: 220px;
        
        height: 220px;
        
        border-radius: 22px;
        
    }
    
    
    
    
    
    /* ==========================================
   CARROSSEL LIVES
========================================== */
    
    
    .live-carousel {
        
        gap: 15px;
        
        overflow-x: auto;
        
        scroll-snap-type: x mandatory;
        
        padding-bottom: 10px;
        
    }
    
    
    
    .live-carousel .live-card {
        
        flex: 0 0 280px;
        
        scroll-snap-align: start;
        
    }
    
    
    
    
    /* ==========================================
   BOTÃO VER MAIS
========================================== */
    
    
    .see-more {
        
        width: 100%;
        
        padding: 12px;
        
        margin-top: 15px;
        
    }
    
    
    
}

@media(max-width:700px) {
    
    
    .featured-live {
        
        height: 230px;
        
        border-radius: 22px;
        
    }
    
    
    
    .featured-player {
        
        width: 90px;
        
        height: 60px;
        
        font-size: 25px;
        
    }
    
    
    
    .featured-info {
        
        left: 18px;
        
        bottom: 18px;
        
    }
    
    
    
    .featured-info h3 {
        
        font-size: 18px;
        
    }
    
    
    
    .featured-info p {
        
        font-size: 13px;
        
    }
    
}