body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; padding: 0; margin: 0;}
.product-z { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.product { background: white; padding: 10px; border-radius: 10px; box-shadow: 0px 0px 15px rgb(0, 0, 0,); width: 220px; height: 305px;}
.product:hover { box-shadow: 0 0 15px rgb(0,0,0);}
.product img { width: 200px; height: auto; border-radius: 10px; }
.product h2 { font-size: 18px; margin: 10px 0; }
.product p { margin: 5px 0; }
.sorteren {position: relative; top: -16px;}


.card{
    position: relative;
    perspective: 60rem;
}

.card-side{
   position: relative;
   backface-visibility: hidden;
   transition: all 0.8s ease;

}

.card-side.back{
    transform: rotateY(-180deg);
    background-color: #0000004d  ;
    width: 220px; 
    height: 322px;
    border-radius: 10px;
    position: absolute;
    bottom: -16px;
    overflow-wrap: break-word
}

.card-side.front{
    background-image: linear-gradient(160deg);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}
.card:hover .card-side.back {
    transform: rotateY(0deg);
}