All solutions

As many people have already mentioned, getting the double background image to work was super hard (impossible for me), so I copied the solution from @ApplePieGiraffe. I really have no idea how to approach this and why doesn't it just work when I set them to stick to the borders. Aside from that, the rest was fairly simple.

Javscript was the hardest part here since I forgot all the techniques useful in such a validation and updating the DOM.

This time I had trouble with the mockup image as I didn't know wheter it should be put in a container representing the left part of the bigger flex container or just sitting there alone. I settled with the latter, which later presented a problem with widths of 1100px+ until a certain point. If anyone could explain that to me and give me any tips regarding anything that's still wrong about this implementation, I'd be very grateful. Also I made the same mistake as the last time, because I styled some element/s using IDs and now I know that I shouldn't.

An unusual (for me) thing I came across was having to set height: auto on body. I thought the body would stretch out as far as any element inside it goes.