Too much space below image on product detail page

Site URL: https://grape-shallot-axh7.squarespace.com/

I'm on 7.1. fluid engine - password: GraciousPony

I've used the following code to ensure that paintings are not cropped on the product detail page and that the image aligns to the top of the section: 

img.ProductItem-gallery-slides-item-image { object-fit: contain !important; }
.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item {height:auto;}

With portrait orientation images like this one 
https://grape-shallot-axh7.squarespace.com/paintings/p/medusa-in-the-shadow-of-athena
 
the space below the content is fine - but on landscape orientation detail pages like this: 
https://grape-shallot-axh7.squarespace.com/paintings/p/the-yellow-haired-girl

there is an excess of space.  

I can't locate the css to reduce that space so that it conforms better to the adjusted height of the image. I've tried height:auto; on .ProductItem-gallery, .ProductItem-gallery-slides and on .ProductItem .ProductItem-summary and none of those work.  

Any ideas for this?
Thanks!
 

You mean this space?

Yes, exactly. 🙂

On 8/14/2022 at 10:53 AM, mbaydesign said:

Yes, exactly. 🙂

Try adding to Design > Custom CSS

.ProductItem {
    padding-bottom: 0px;
}
section#pdp {
    padding-bottom: 0px;
}
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 100% !important;
}

Oh, oops - I thought that was it but it's not.  It's great on the landscape orientation image, but it cuts off the bottom of the portrait orientation: 

like this one 
https://grape-shallot-axh7.squarespace.com/paintings/p/medusa-in-the-shadow-of-athena 

Leaving off the .tweak-product, restores the full image. So, currently, I'm just using the two 0px padding-bottom which eliminates the bulk of that extra space.  It's definitely better than before. 🙂