I am trying to add different image elements within my hero section, reference photo below, trying to add those two cursors, right now it's position is absolute, hence when resizing its stuck on predefined position. 
Here is my reactjs and css
function Hero() { return (<section className="hero"><div className="hero-content"><h1>Hi, I'm Jaed!</h1><p>I transform ideas into engaging and accessible interfaces, bridging the gap between business need and user delight ✨</p></div><img className="cursor1" src="Comment cursor1.png"></img><img className="cursor2" src="Comment cursor2.png"></img></section> );}export default Hero;.cursor1{width: 80px;height: 60px;position: absolute;top: 500px;left: 500px;}.cursor2{width: 100px;height: 60px;position: absolute;top: 400px;right: 550px;}.hero{padding: 200px 0;text-align: center;align-items: center;display: flex;justify-content: center;}.hero-content{max-width: 800px;padding: 100px 0px;text-align: center;align-items: center;justify-content: center;display: flex;flex-direction: column;padding-left: 112px;padding-right: 112px;padding-top: 64px;padding-bottom: 64px;margin-left: 240px;margin-right: 240px;}.hero-content h1{font-weight: 900;font-size: 80px;color: #3B519E;text-align: center;align-items: center;margin: 0;}Any ideas on how I can achieve this that it will be responsive? Thank you!
PS: and yes this is on a seperate file haha. I don't know how to add the css code on another panel here on stack.