/* ===========================
   MENU CARDS
   BUMBY
=========================== */


.artist-menu {

    width:100%;

    padding:

    80px 8%;


    display:grid;

    grid-template-columns:

    repeat(5,1fr);


    gap:25px;


}





.menu-card {


    min-height:

    300px;


    background:

    rgba(255,255,255,.65);


    backdrop-filter:

    blur(10px);


    border:

    1px solid rgba(255,255,255,.7);


    border-radius:

    var(--radius-large);


    padding:

    35px 25px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    position:relative;


    overflow:hidden;


    cursor:pointer;


    transition:

    transform var(--transition-medium),

    box-shadow var(--transition-medium),

    background var(--transition-medium);

}






/* DECORATION INTERNE */


.menu-card::before {


    content:"";


    position:absolute;


    width:160px;


    height:160px;


    border-radius:50%;


    background:

    var(--pink-soft);


    top:-80px;


    right:-80px;


    opacity:.5;


    transition:

    transform var(--transition-medium);


}







.menu-card:nth-child(2)::before {


    background:

    var(--sage);


}




.menu-card:nth-child(3)::before {


    background:

    var(--lavender);


}





.menu-card:nth-child(4)::before {


    background:

    var(--peach);


}





.menu-card:nth-child(5)::before {


    background:

    var(--pink);


}








/* CONTENU */


.card-icon {


    font-size:

    3rem;


    margin-bottom:

    25px;


    z-index:1;


    transition:

    transform var(--transition-medium);

}





.menu-card h2 {


    font-size:

    2rem;


    color:

    var(--purple);


    z-index:1;


    margin-bottom:

    15px;


}





.menu-card p {


    color:

    var(--brown);


    z-index:1;


}









/* HOVER */


.menu-card:hover {


    transform:

    translateY(-18px);


    box-shadow:

    var(--shadow-hover);


    background:

    white;


}



.menu-card:hover::before {


    transform:

    scale(1.4);


}



.menu-card:hover .card-icon {


    transform:

    translateY(-8px)

    rotate(-5deg);


}





/* ===========================
   MOBILE :
   LES CARTES SONT REMPLACEES
   PAR LA NAVIGATION BASSE
=========================== */


@media(max-width:600px){


    .artist-menu{

        display:none !important;

    }


}