.song-grid{

    display:grid;

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

    gap:28px;

    margin-top:40px;
}

.song-card{

    background:#141414;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.song-card:hover{

    transform:translateY(-8px);
}

.song-cover{

    position:relative;

    display:block;

    overflow:hidden;
}

.song-cover img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    transition:.45s;
}

.song-cover::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        transparent
    );
}

.song-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 0 1px rgba(244,196,48,.15);
}

.song-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    opacity:0;

    transition:.35s;
}

.song-card:hover .song-overlay{

    opacity:1;
}

.play-button{

    width:72px;

    height:72px;

    border:none;

    border-radius:50%;

    background:#f4c430;

    color:#111;

    font-size:28px;

    cursor:pointer;

    transition:.3s;
}

.play-button:hover{

    transform:scale(1.1);
}

.song-info{

    padding:22px;
}

.song-info h3{

    margin:0;

    font-size:1.2rem;
}

.artist{

    margin-top:8px;

    color:#9ca3af;
}

.genre{

    display:inline-block;

    margin-top:16px;

    padding:6px 14px;

    border-radius:999px;

    background:#222;

    color:#f4c430;

    font-size:.8rem;
}

.song-info h3 a{
    color:#fff;
    text-decoration:none;
}

.song-info h3 a:hover{
    color:#f4c430;
}