Thinking I need to redesign two elements in order to have them display properly on different devices... help?

[productionsounddotnet]

I have an image that slides in from the left on my index page. In order to have the text underneath the boom, I have the text and the image on different axes. However, this seems to be very problematic when it comes to different screen sizes because the text moves up and down quite a bit depending on the screen size. I was in the process of creating multiple breakpoints (oh my god there are so many) when I thought maybe there would be a better way to have the text and the image all adjust in relation to each other. The reason it's a little tricky is because the image and the text overlap, as mentioned (you'll see what I'm talking about when you look at the site).
Anyway...

codepen: https://codepen.io/arpunk/pen/vYLbvOG

site: www.productionsound.net

Is there a better way to code the image/text?
Thank you!