@media(max-width: 1200px) {

    .song-expanded {

        grid-template-columns: 1fr;
    }
}

@media(max-width: 768px) {

    .songs-page {
        padding: 120px 20px;
    }

    .song-main-info h2 {
        font-size: 22px;
    }

    .song-meta {
        flex-direction: column;
        gap: 8px;
    }

    .lyric-line {
        font-size: 18px;
    }
}
/* =========================
   TABLET & MOBILE
========================= */

@media(max-width:900px){

    /* NAVBAR */

    .navbar{

        top:14px;

        padding:0 14px;

        box-sizing:border-box;

    }

    .navbar-container{

        width:100%;

        height:64px;

        border-radius:18px;

        padding:0 18px;

    }

    .navbar-menu{

        display:none;

    }

    .navbar-action{

        display:none;

    }

    .navbar-logo img{

        width:42px;

        height:42px;

    }

    .navbar-logo span{

        font-size:15px;

    }

    /* HERO */

    .hero{

        min-height:auto;

        padding:
        140px 24px 80px;

        flex-direction:column;

    }

    .hero-showcase{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

        width:100%;

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

        justify-content:center;

        gap:14px;

        margin-bottom:50px;

    }

    .hero-card{

        width:100%;

        height:170px;

    }

    .hero-content{

        position:relative;

        right:auto;

        top:auto;

        transform:none;

        text-align:center;

        max-width:100%;

    }

    .hero h1{

        font-size:58px;

        line-height:1.2;

    }

    .hero p{

        font-size:17px;

        line-height:2;

    }

    /* ABOUT */

    .about-card{

        padding:40px 24px;

        border-radius:28px;

    }

    .about-avatar{

        width:120px;

        height:120px;

    }

    .about-text{

        font-size:1rem;

        line-height:2.5;

    }

    /* FOOTER */

    .footer-inner{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-brand,
    .footer-links,
    .footer-social{

        justify-self:center;

    }

    .footer-links{

        flex-wrap:wrap;

        justify-content:center;

    }

}

@media(max-width:900px){

    .hero{

        height:auto !important;

        min-height:auto !important;

        padding:
        120px 18px 50px;

        display:flex;

        flex-direction:column;

        gap:40px;

    }

    .hero-showcase{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

        width:100%;

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

        gap:14px;

        order:2;

    }

    .hero-card{

        width:100%;

        height:auto;

        aspect-ratio:1/1;

    }

    .hero-content{

        position:relative;

        top:auto;

        right:auto;

        transform:none;

        text-align:center;

        width:100%;

        max-width:100%;

        order:1;

    }

    .hero h1{

        font-size:64px;

        line-height:1.1;

        margin-bottom:18px;

    }

    .hero p{

        font-size:18px;

        line-height:2;

        margin-bottom:26px;

    }

    .hero-actions a{

        width:100%;

        max-width:320px;

        margin:auto;

    }

}

.navbar-container{

    height:68px;

}
@media(max-width:900px){

    /* NAVBAR */

    .navbar{

        top:16px;

        padding:0 16px;

    }

    .navbar-container{

        width:100%;

        height:72px;

        border-radius:24px;

        padding:0 20px;

        display:flex;

        align-items:center;

        justify-content:space-between;

    }

    .navbar-menu,
    .navbar-action{

        display:none;

    }

    .mobile-menu-btn{

        width:42px;

        height:42px;

        border-radius:14px;

        display:flex;

        align-items:center;

        justify-content:center;

        background:
        rgba(255,255,255,.05);

        color:white;

        font-size:22px;

    }

    .mobile-empty{

        width:42px;

        height:42px;

    }

    .navbar-logo{

        position:absolute;

        left:50%;

        transform:translateX(-50%);

        display:flex;

        align-items:center;

        gap:10px;

    }

    .navbar-logo img{

        width:44px;

        height:44px;

    }

    .navbar-logo span{

        font-size:22px;

    }

    /* HERO */

    .hero{

        height:auto;

        min-height:auto;

        padding:
        140px 20px 70px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:50px;

    }

    .hero-content{

        position:relative;

        top:auto;

        right:auto;

        transform:none;

        text-align:center;

        max-width:100%;

        width:100%;

        order:1;

    }

    .hero-kicker{

        font-size:11px;

        letter-spacing:5px;

        margin-bottom:16px;

    }

    .hero h1{

        font-size:72px;

        line-height:1;

        margin-bottom:24px;

    }

    .hero p{

        font-size:18px;

        line-height:2.1;

        margin-bottom:34px;

    }

    .hero-actions a{

        width:100%;

        max-width:340px;

        margin:auto;

    }

    /* CARDS */

    .hero-showcase{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

        width:100%;

        display:grid;

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

        gap:18px;

        order:2;

    }

    .hero-card{

        width:100%;

        aspect-ratio:1/1;

        height:auto;

        border-radius:28px;

    }

    .card-title{

        bottom:18px;

        font-size:17px;

    }

}