body {
overflow-x: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
-webkit-perspective: 1800px;
perspective: 1800px;
position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
display: block;
width: max-content;
max-width: 45%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 0.4s;
transform: scale(0.95);
margin: auto;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a + img {
visibility: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a:before {
content: "";
display: block;
width: 80px;
width: var(--book-thickness);
height: 100%;
position: absolute;
right: 0;
top: 0;
background: -webkit-gradient(linear,left top,right top,from(#d9d9d9),color-stop(25%,#fcfcfa),color-stop(75%,#d9d9d9),to(#fcfcfa));
background: -webkit-linear-gradient(left,#d9d9d9,#fcfcfa 25%,#d9d9d9 75%,#fcfcfa);
background: linear-gradient(90deg,#d9d9d9 0,#fcfcfa 25%,#d9d9d9 75%,#fcfcfa);
background-size: 4px 100%;
transform-origin: center right;
transition: 0.4s;
transform: rotateY(90deg);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(2) a:before {
left: calc( -1 * var(--book-thickness) );
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child:hover a {
transform: scale(0.80) rotateY(-25deg) translateZ(-40px);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(2) a:hover {
transform: scale(0.80) rotateY(25deg) translateZ(-40px);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
transform: translateZ(var(--book-thickness));
}
@media (max-width: 767px) {
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child a {
transform: scale(0.80) rotateY(-25deg) translateZ(-40px);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(2) a {
transform: scale(0.80) rotateY(25deg) translateZ(-40px);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
max-width: 225px;
}
}