Skilled e-learning landing page solution

Hi Isaac dont overthink the positioning, there are many ways to solve it. I just used negative margins to position the image. To get consistency in the height of your "cards" usilize css grid or flexbox. I used css grid which gave me the good control over what it is I wanted to achieve.

Happy Coding

I used flexbox with main content and hero image, and then used transform/traslate to move the image out of the flexbox item position to the top and right. One issue with your design is that it does not break at the same time - cards switch to 2 columns before the image is changed to the tablet image. I used large column-gap to prevent this. It then gets changed to desired column gap width at the same break condition when image is changed. Thus columns change from 1 to 2 at the same time as image changes. Hope this helps!