.img-3d-wrapper {
    perspective: 900px;
    width: 100%;
}

/* Shared styles */
.img1-3d, .img2-3d {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transform-origin: center center;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 0.375rem;
}

/* Only the difference */
.img1-3d { transform: rotate3d(0, 1, 0, 40deg); }
.img2-3d { transform: rotate3d(0, 1, 0, -40deg); }

.img1-3d:hover, .img2-3d:hover {
    transform: rotate3d(0, 1, 0, 0deg);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
    .img1-3d, .img2-3d {
        transform: none;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    }
}