I am trying to practice my web dev skills and I ran into some problems. I am currently trying to do a challenge in front end mentor. I would say I am 70% done with the challenge but I am stuck with the image positioning.

[![enter image description here][1]][1]

As you can see there is shape svg and a phone mockups image.
I made the shape svg as background image and I thinks its working fine. However my problem is the phone mockups as you can see the top phone is hidden below the header but the bottom one is overlapping to the next section.

Do I need to make the phone mockup image as a pseudo element?
I want to know how do you tackle this kind of svg/image positioning and what is your thought process?

If possible can someone try do this? I’d like to see how you make it work.
here is the link for the asset: https://fileport.io/HfKfG8hT5VWP
[1]: https://i.sstatic.net/6HwgrD4B.png