Help! - cropped images on product pages on mobile site

My images are set at 4:3 ratio in my shop design and it looks fine on a desktop but when you click into a porduct on the mobile site it shows them as 3:2 and they look cropped (It only happens in mobile not desktop) How do I force them to show as 4:3 on the product page on the mobile site?

Have attached screengrabs, in the first image you can see how it should look on the shop contents page but when you click through to the product page it crops the image. I have tried every setting and every bit of code I can find on the internet from people with similar problems but they didnt work or messed up the page even more.

Any help would be massively appreciated!

site is www.thenomadicsauna.co.uk

Give this code a try.

@media screen and (max-width: 767px){

    img.ProductItem-gallery-slides-item-image {
            object-fit: inherit !important;
    }

}