Product Detail Page Increase Carousel Size

Hello! I make all of my product images to for a 1x1 ratio. When going mobile view it only allows me to display the photos in a slideshow above the product info/add to cart section. The slideshow format is not the same ratio + cuts off my product photos. Any ideas on how to fix this with CSS or different way I am missing?

They look great on desktop, but mobile not so much. Site Password: JournalLove24!

Example: https://www.soulfirejournalco.com/themepacks/p/test-1-lacna-93na9-na8nw

Example: https://www.soulfirejournalco.com/single-pages/p/cy36ce89ztlpxde-d75jd-zr7ep-l6jgz-2ecmz-z4ze3-xakr8-chxb3-4ftzb-jp2ah

You try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
section.ProductItem-summary img {
    object-fit: contain !important;
}}

That worked - thank you!