.containerCards{
perspective: 1000px;
transform-style: preserve-3d;
}
.card{
filter: brightness(.1);
transition: all .6s
}
.card:hover{
filter: brightness(1);
transform: translateZ(200px)
}
.card:hover + *{
filter: brightness(.7);
transform: translateZ(150px) rotateY(40deg)
}
.card:hover + * + *{
filter: brightness(.5);
transform: translateZ(70px) rotateY(20deg)
}
.card:hover + * + * + *{
filter: brightness(.3);
transform: translateZ(30px) rotateY(10deg)
}
.card:has( + *:hover){
filter: brightness(.7);
transform: translateZ(150px) rotateY(-40deg)
}
.card:has(+ * + *:hover){
filter: brightness(.5);
transform: translateZ(70px) rotateY(-20deg)
}
.card:has(+ * + * + *:hover){
filter: brightness(.3);
transform: translateZ(30px) rotateY(-10deg)
}