Image blocks (card) tiling effect

Site URL: https://www.omarhasandesign.com/work/levarti-nkth7

Hello,
I'm trying create a layout similar to the image attached, using a combination of image cards aligned left and right to create a tiled effect. Currently, in edit mode I have created a layout similar to the attached image but when I publish it, the section with the text doesn't appear (I assume this is because I am not selecting an image to accompany the copy?)
When I preview in edit mode the desired design is visible,  but in mobile view the empty image space is visible and creates a big gap.

To create this tight grid effect I've used the built in style settings to adjust the image separation and the image width (green circle in image attached) However this made the padding between inline images above uneven. I used some custom css to try and adjust this and not sure is this the best way to go about this as it doesn't transfer well to mobile either.

I've tried using text boxes and spacers too but it's difficult to get the tile effect even this way and the spacers also appear on mobile view.

Code used below:

//Margin for image blocks//
.sqs-block { 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-top: -20px; 
    margin-bottom: -20px; 
    } 
 

https://www.omarhasandesign.com/work/levarti-nkth7

pass: squarespace_help

Thank you!

I think I have solved it, for anyone interested - Maybe someone who knows more can suggest if this is the best way to do it. My coding is very limited.

Using this combination of code, style settings (to adjust the image separation) and not displaying captions on inline images I've managed to get equal distances between all images.

//padding for image blocks//
.sqs-block.image-block {
 padding-top:0px !important; padding-bottom:10px !important; padding-left:0px; padding-right:0px;
}