.container{
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    display: flex;
    transform-style: preserve-3d;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}

.container input[type=radio]{
    display: none;
}

.cards{
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;

}

.card img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.card{
    position: absolute;
    width: 75%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform 0.1s ease;
}

#item-1:checked ~ .cards #song-11,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2,
#item-4:checked ~ .cards #song-3,
#item-5:checked ~ .cards #song-4,
#item-6:checked ~ .cards #song-5,
#item-7:checked ~ .cards #song-6,
#item-8:checked ~ .cards #song-7,
#item-9:checked ~ .cards #song-8,
#item-10:checked ~ .cards #song-9,
#item-11:checked ~ .cards #song-10{
    transform: translateX(-30%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}


#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-4,
#item-4:checked ~ .cards #song-5,
#item-5:checked ~ .cards #song-6,
#item-6:checked ~ .cards #song-7,
#item-7:checked ~ .cards #song-8,
#item-8:checked ~ .cards #song-9,
#item-9:checked ~ .cards #song-10,
#item-10:checked ~ .cards #song-11,
#item-11:checked ~ .cards #song-1{
    transform: translateX(30%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3,
#item-4:checked ~ .cards #song-4,
#item-5:checked ~ .cards #song-5,
#item-6:checked ~ .cards #song-6,
#item-7:checked ~ .cards #song-7,
#item-8:checked ~ .cards #song-8,
#item-9:checked ~ .cards #song-9,
#item-10:checked ~ .cards #song-10,
#item-11:checked ~ .cards #song-11{
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 1;
}

#item-1:checked ~ .cards #song-1 img,
#item-2:checked ~ .cards #song-2 img,
#item-3:checked ~ .cards #song-3 img,
#item-4:checked ~ .cards #song-4 img,
#item-5:checked ~ .cards #song-5 img,
#item-6:checked ~ .cards #song-6 img,
#item-7:checked ~ .cards #song-7 img,
#item-8:checked ~ .cards #song-8 img,
#item-9:checked ~ .cards #song-9 img,
#item-10:checked ~ .cards #song-10 img,
#item-11:checked ~ .cards #song-11 img{
    box-shadow: 0px 0px 10px 0px #FFFFFF;
    width: 100% !important;
}