How to change padding on block based images grids

I have an issue with irregular padding and block sizes.

I am trying to create a page composed of Images in an irregular grid.

1. For some reason the images are being automatically cropped so that they don't fit their container - leaving irregular spacing between images

2. I would like to adjust the spacing between images

My attempts to figure out the CSS have been a bit of guess work with no elegant fix that works. Ideally I'd like a responsive padding solution.

https://jonathangallagher.squarespace.com/overview-2

Notes:

- This layout is adapted from the supplied grid image layouts, which I then used the poster option on each image.

- Brine Template

- Bizzarely when i click on each image to edit it, it suddenly fills it's container, only to revert back once finished.

- I can't to minor adjustments the containers of the images, some don't align, which is odd, as you'd expect there to be a predefined grid

i found 1 factor contributing to the cause:

- turns out the grid adjusts to the image sizes, thereby leaving big gaps everywhere unless you pre-plan it and adjust all our images accordingly.

seems very odd.

- but that doesn't explain the padding seen between rows, that isn't there between columns, that is also noticeable on mobile.