.card {
    position: absolute;
    left: 50%;
    width: 240px;
    height: 320px;
    --ty: 0px;
    --s: 1;
    transform: translate(-50%, var(--ty)) scale(var(--s));
    transition:
    left .35s ease,
    transform .35s ease,
    opacity .35s ease,
    box-shadow .35s ease;
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
}
.card[data-pos="front"] {
    left: 50%;
    --ty: 0px;
    --s: 1;
    opacity: 1;
    z-index: 30;
}
.card[data-pos="middle"] {
    left: 58%;
    --ty: 10px;
    --s: 0.96;
    opacity: 0.95;
    z-index: 20;
}
.card[data-pos="back"] {
    left: 66%;
    --ty: 20px;
    --s: 0.92;
    opacity: 0.9;
    z-index: 10;
}
.card:hover {
    transform: translate(-50%, calc(var(--ty) - 8px)) scale(calc(var(--s) + .04));
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.card-img {
    width: 100%;
    height: 100%;
    background-color: #e5e7eb; /* gray-200 */
    background-size: cover;
    background-position: center;
}