/* ==========================================================
   PAGE HEADER
========================================================== */

.page-header {

    padding: 160px 0 70px;

    text-align: center;

    background:
        radial-gradient(circle at top, rgba(139,92,246,.18), transparent 55%),
        #0b0b12;

}

.page-header h1 {

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:15px;

}

.page-header p {

    color:#9ca3af;

    font-size:18px;

}


/* ==========================================================
   TRACK PAGE
========================================================== */

.tracks-page {

    padding:70px 0 100px;

    background:#0b0b12;

}


/* ==========================================================
   GRID
========================================================== */

.music-grid {

    display:grid;

    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));

    gap:30px;

    align-items:start;

}


/* ==========================================================
   CARD
========================================================== */

.track-card {

    width:50%;

    background:#14141e;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    transition:.35s ease;

}


.track-card:hover {

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:
        0 20px 40px rgba(139,92,246,.20);

}


/* ==========================================================
   IMAGE
========================================================== */

.track-image {

    position:relative;

    width:100%;

    height:260px;

    overflow:hidden;

}


.track-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s ease;

}


.track-card:hover .track-image img {

    transform:scale(1.08);

}


/* ==========================================================
   PLAY BUTTON
========================================================== */

.play-btn {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:65px;

    height:65px;

    border-radius:50%;

    border:none;

    background:#8b5cf6;

    color:white;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    transition:.3s;

}


.track-card:hover .play-btn {

    opacity:1;

}


.play-btn:hover {

    background:#a855f7;

    transform:
        translate(-50%,-50%)
        scale(1.1);

}


/* ==========================================================
   INFO
========================================================== */

.track-info {

    padding:20px;

}


.track-info h3 {

    color:#fff;

    font-size:20px;

    font-weight:700;

    margin:0 0 8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.track-info span {

    color:#9ca3af;

    font-size:15px;

}


/* ==========================================================
   EMPTY
========================================================== */

.music-empty {

    grid-column:1/-1;

    text-align:center;

    padding:80px 20px;

}


.music-empty h2 {

    color:#fff;

    font-size:28px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:1200px){


    .music-grid {

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

    }


}



@media(max-width:900px){


    .page-header {

        padding:130px 0 50px;

    }


    .page-header h1 {

        font-size:38px;

    }


    .music-grid {

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

    }


}



@media(max-width:600px){


    .page-header h1 {

        font-size:32px;

    }


    .music-grid {

        grid-template-columns:1fr;

        gap:20px;

    }


    .track-image {

        height:300px;

    }


    .play-btn {

        opacity:1;

    }


}