I need a hero section built for a website I'm working on. Deliverable will be the HTML and CSS needed to create the element. Hero section will contain text on the left, and an image on the right. All content is dynamic, so it needs to accept a rectangular image (we'll assume it's at least the correct aspect ratio, but it may change). Where the text is dynamic, the height of the box could be taller than mocked up.
The background on the left/text side is a gradient, so a solid bg color can't be used as an overlay to pseudo-mask the image.
The red wavy graphic in the middle should be a vector.
Some possible approaches would be using masking or a clip-path.
Deliverable should be responsive. For mobile resolutions below 600 px wide, we'll just drop the image altogether and only have the text side.
