/*======================================
FRAMEWORK 10 SHOWCASE
======================================*/

.showcase{

padding:150px 0;

}

.showcase-grid{

display:grid;

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

gap:30px;

margin-top:80px;

}

.music-card{

background:var(--glass);

border:1px solid var(--glass-border);

border-radius:var(--radius-lg);

padding:40px;

text-align:center;

backdrop-filter:blur(var(--blur));

transition:var(--transition);

transform-style:preserve-3d;

cursor:pointer;

}

.music-card img{

height:180px;

object-fit:contain;

margin:auto;

transition:.45s;

}

.music-card h3{

margin:25px 0 12px;

font-size:34px;

}

.music-card p{

margin-bottom:30px;

}

.music-card:hover{

transform:

rotateX(8deg)

rotateY(-8deg)

translateY(-18px);

box-shadow:

0 25px 60px rgba(124,58,237,.35);

}

.music-card:hover img{

transform:scale(1.1) rotate(-8deg);

}

@media(max-width:992px){

.showcase-grid{

grid-template-columns:1fr;

}

}