Hi, I’m on a mobile at the moment so can’t provide code but can offer some suggestions especially as you want to learn anyway :).
The simplest answer to overlap the image would be to a apply a translate Y transform to the image and just drag it into the overlap position you want. Of course that could create issues if other content was in the way as the transformed section doesn’t take part in the flow of the page.
To do it in grid without using a transform you would need to create 4 rows (and probably 4 columns but 2 may suffice). Then you can span the image across the rows to create the overlap. Elements in grid can span rows but you have to define their grid positions etc.
There’s probably other ways to do this but those were my first thoughts. Have a go yourself first but I’ll put up a demo later today when I get back. It may be that there are other tweaks needed but until you start coding they don’t become obvious
Just for fun here’s another way to color the blocks but is not as nice as the gradient method and requires a knowledge of the grid row dimensions so is what is called a magic number fix.
I’ve coloured each section differently so you can see where the colors are applied. It uses the :before element to place the overlapping background segments absolutely into position.