styles.css

/* This CSS snippet is designed to enhance the appearance and layout of an image gallery, specifically targeting elements within a web page that uses the .jet-woo-product-gallery classes—indicative of a JetWooBuilder product gallery for Elementor in a WordPress environment. */

selector{
    overflow:hidden;
    border-radius:0 20px 20px 0;
}

selector .jet-woo-product-gallery__image img {
    object-fit: cover;
    aspect-ratio: 1;
    width:300px;
}

.jet-woo-product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 50%); /* Two columns with equal width */
    grid-auto-rows: auto; /* Rows with equal height */
     gap: 10px;/* Set the gutter value, adjust as needed */
}

@media (max-width:1024px){
.jet-woo-product-gallery-grid {
     gap: 5px;/* Set the gutter value, adjust as needed */
}
}

selector .jet-woo-product-gallery__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

selector .jet-woo-product-gallery__image:hover::before {
  opacity: 1;
}