Increase product images size and show image thumbnails in product page - Dawn Theme

[LuizaSMC23]

Hello, I'm looking for help with dawn theme, my images are very small (Photo 1), then I found a code here to increase the images on collection pages and at the homepage but when I increase the images using this code the margin is wrong pulling to the right size (Photo 2). 

Regarding the images on the product page it is also very small but the code above didn't work there, also I didn't find a way to show the other images that I uploaded below the main image, even that I have selected to show the thumbnails (Photo 3).

The code I used on collection pages and homepage: 

.collection .card__inner {
width: 120%;
margin: auto;
}

Can someone help me?

(Photo 1) - I wanted the images to be bigger like the red mark around it

(Photo 2) - wrong margin when I use the code

 

(Photo 3) - red mark show the size I wanted for the image and the thumbnails underneath the main image

 

[BSS-TekLabs]

- Here is the solution for you @LuizaSMC23 
- Please follow these steps: 
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 600px) {
.card--card .card__inner .card__media {
    margin: 0 !important;
    width: 100% !important;
}
.card__inner.ratio {
    width: 100% !important;
}
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[LuizaSMC23]

Hello, thank you so much for your help! The images are perfect now in the homepage and collection pages.

For the product page image size and thumbnails, do you know what can I do?

[BSS-TekLabs · Accepted solution]

<style>
@media only screen and (max-width: 600px) {
.card--card .card__inner .card__media {
    margin: 0 !important;
    width: 100% !important;
}
.card__inner.ratio {
    width: 100% !important;
}
.product-media-container .media {
    padding-top: var(--ratio-percent) !important;
}
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    width: 100% !important;
}
}
</style>

Please replace to this code @LuizaSMC23 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[LuizaSMC23]

You rock!!!! All perfect now, thanks a lot