/* ==================================================
   DESKTOP GRANDE
================================================== */

@media screen and (min-width:1025px){

    .content{

        padding:25px;

    }

   .hero-slide{
        height:550px;
    }

    .overlay h1{

        font-size:48px;

    }

    .overlay p{

        font-size:18px;

    }

    .now-playing{

        flex-direction:row;

        align-items:center;

    }

    .vinyl{

        width:180px;
        height:180px;

    }

    .vinyl img{

        width:90px;
        height:90px;

    }

    .song-info h2{

        font-size:42px;

    }

    .song-info p{

        font-size:20px;

    }

    .quick-menu{

        grid-template-columns:repeat(4,1fr);

    }

}

/* ==================================================
   TABLET
================================================== */

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

    .sidebar{

        left:-320px;

        position:fixed;

        width:300px;

        height:100vh;

        transition:left .35s ease;

        z-index:9999;

    }

    .sidebar.show-menu{

        left:0;

    }

    .content{

        margin-left:0;

        width:100%;

    }

    .hero-slide{

        height:320px;

    }

    .overlay h1{

        font-size:36px;

    }

    .overlay p{

        font-size:16px;

    }

    .song-info h2{

        font-size:34px;

    }

    .quick-menu{

        grid-template-columns:
        repeat(2,1fr);

    }

}

/* ==================================================
   MOVIL
================================================== */

@media screen and (max-width:768px){

    .content{

        padding:15px;

    }

    .hero-slide{

        height:220px;

    }

    .overlay{

        padding:20px;

    }

    .overlay h1{

        font-size:28px;

    }

    .overlay p{

        font-size:15px;

    }

    .now-playing{

        flex-direction:column;

        text-align:center;

        padding:25px;

    }

    .radio-disc{

        margin-bottom:15px;

    }

    .vinyl{

        width:140px;
        height:140px;

    }

    .vinyl img{

        width:70px;
        height:70px;

    }

    .song-info{

        width:100%;

    }

    .song-info h2{

        font-size:28px;

    }

    .song-info p{

        font-size:18px;

    }

    .wave-bars{

        justify-content:center;

    }

    .play-btn{

        margin-top:20px;

        width:70px;
        height:70px;

    }

    .quick-menu{

        grid-template-columns:
        repeat(2,1fr);

        gap:15px;

    }

}

/* ==================================================
   CELULARES PEQUEÑOS
================================================== */

@media screen and (max-width:480px){

    .hero-slide{

        height:180px;

    }

    .overlay{

        padding:15px;

    }

    .overlay h1{

        font-size:22px;

    }

    .overlay p{

        font-size:14px;

    }

    .hero-tag{

        font-size:.7rem;

        padding:6px 12px;

    }

    .vinyl{

        width:120px;
        height:120px;

    }

    .vinyl img{

        width:60px;
        height:60px;

    }

    .song-info h2{

        font-size:22px;

    }

    .song-info p{

        font-size:15px;

    }

    .play-btn{

        width:60px;
        height:60px;

        font-size:1.2rem;

    }

    .quick-menu{

        grid-template-columns:
        repeat(2,1fr);

    }

    .quick-card{

        padding:20px 10px;

    }

    .quick-card i{

        font-size:1.5rem;

    }

}



@media (max-width: 768px){
    .sponsors-bar img{
        height: 120px;
        max-width: 95%;
    }
}