bottom align grid of image blocks with captions

Site URL: https://kcostudios.squarespace.com/

Hello,

I'm trying to create a 4x 2 grid of images, where image blocks with captions below take up 1, 2 or 4 squares of the grid. When I have 3 images aligned, I seem to be able to get them to all the same height (using shift to move in pixel increments). But when I have two images stacked on top of each other, I can't get the large image next to it to align. I've been doing it visually but on the live site it will either shift, or it will look pretty close but not scale responsively.

screenshots attached of misalignment.

Site is 7.1

Site is https://kcostudios.squarespace.com/

password: demo

Thank you!

Hi,

Which page are you referring to? I don't see it on homepage

Sorry, it's on this page now–the top section! 

https://kcostudios.squarespace.com/services

password: demo

It looks difficult. I think we need to check all screen sizes  & adjust spacing to make sure height is same.

div#page-section-627d8f1605b9d96ca6469ad3 .span-6 .span-3 .image-block {
    padding-top: 8px;
}