Images via code blocks // Can I level them all out like a grid?

Site URL: https://abba.squarespace.com/gallery

My site is basically finished but I need help on this one last thing!

I created a custom store by using code blocks for individual images, with the corresponding product blocks under each image. (Image attached)

There are 11 pages and about 100 separate code blocks. This is the code in each code block...

<a href="image-url" class="MagicZoom">
    <img src="image-url"></a>

Then I place the product block under.

Some pages look fine, others look way worse. I just want everything aligned neatly like a grid. Is there a way to tell each code block image to be certain dimensions? Maybe one master code? Even If I have to edit all 100 blocks, it's ok. I just don't want to have to resize and re-upload all my images one by one to the custom files.

All I'm looking for is a nice clean grid! 🙂

Last note: I have this in the custom header for each page in the gallery. Could this be messing with something?

<style>
  .product-block .productDetails .product-title {
    font-family: 'scrubby', alternative-web-safe-font;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
    padding: 0
}
</style>

If someone could please please help me! I'm SO CLOSE to the FINISH LINE!

Many thanks,

Elijah