/**
 * Headwall WP Tutorials : WooCommerce Single Product Image Gallery Grid (WPTPG)
 *
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-single-product-image-gallery-grid/
 *
 */
.woocommerce .product-gallery-grid {
   float: left;
   width: 50%;
}

.woocommerce .product-gallery-grid-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap; /* Wrap images to the next row */
}

.woocommerce div.product div.images.product-gallery-grid a {
   display: block;
   padding: 10px; /* Change the padding around your image here */
}

.woocommerce div.product div.images.product-gallery-grid img {
   display: block;
   object-fit: cover;
   height: 10em; /* This is the height of your images */
}

@media (min-width: 768px) {
   .woocommerce div.product div.images.product-gallery-grid img {
      height: 15em; /* This is the height of your images */
   }
}