Responsive layout using Flex with JS form validation

What are you most proud of, and what would you do differently next time?

I'm proud of persevering with this one. The layout was hard. The JavaScript didn't take me very long 👏🏻. I think this was a Grid layout that I didn't spot, so I used Flex. I did okay with it but it just took me so long and became miserable at some point. Media queries particularly slowed me down... I still don't understand background-image well. I'm happy to submit this one, and I hope to better my instincts when it comes to anticipating how layouts will behave when designing responsively so I can choose the best avenue for my workflow because this was not fun 😂

What challenges did you encounter, and how did you overcome them?

The main challenge was with the layout. I hadn't used the art direction technique in a long time for the image, so I had to refresh my knowledge on that which was good. I used display: contents; for the first time which allowed me to work through some of the nuisances of the responsiveness of this design. I'm happy with the JavaScript I wrote, it's becoming clearer to me.

What specific areas of your project would you like help with?

1. I'd love feedback on how best to use background-image for this design.
2. I'm also not sure why on desktop, the content doesn't fill the viewport height, even though I programmed it to.
3. When you trigger the error state, the top and bottom lines of the input field don't blend well with the arrow submit button, how might a pro refine this? I don't think it looks good this way.