=fix the issue #3524

[Made4Uo]

PR Summary:

This resolve issue #3524, Clicking the image on the product page magnifies it significantly. The image does not provide good user experienced when it was zoomed so much.

I adjusted the product modal images to fit the screen and be able to view images without being cut off

Why are these changes introduced?

Fixes #3524.
I changed mostly the coide in the section-main-product.css

What approach did you take?

I made sure that the images are responsive to devices.

Other considerations

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

This will show the product modal images without cutting off

Testing steps/scenarios

• Step 1 - Test the responsiveness in screen above 750px
• Step 2 - Test the responsive in screen below 749px
• Step 3 - Test view on portrait photos, landscape, and square images for all screens

Demo links

https://xnnmrs5twhqwt5v2-57889030244.shopifypreview.com/products/dark-denim-top
https://theme-bella1.myshopify.com/?preview_theme_id=136173748324/products/dark-denim-top

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ngt500]

Shirt on left: aspect-ratio: 1;
Shirt on right: aspect-ratio: auto;

aspect-ratio: 1; is causing some images to become distorted when testing.