All solutions

When I tried to write my @media styles for Desktop (my approach was mobile-first) on a seperate file just like global styles and variables, the styles were overritten because they came first in order in the final css file.

Does anyone know how to seperate @media styles each in it's own file, and still get the styles applied?

In this one I focused a lot on the validation part. I'm pretty happy with the result! Any further comments would be appreciated though!

I didn't manage to fully understand how the background was set in the photos, so I tried just to make it look nice :)

The email validation functionally is working, but any suggestion for a better approach would be much appreciated!

When switching to desktop layout, and after setting css grid, the red and orange cards that are together in the central column, had a smaller height than the other two on the sides.

Min or max height on these cards had no effect, they kept staying shorter. What worked was setting the grid row height to the given height, as well as setting the cards' height explicitly, which is what i sticked with.

Is that a correct/good approach? Was there another way of making the cards' height go up to 250px without explicitly setting to this number?

I would like some feedback about accessibility.

I also tried to make the card responsive, but given the small changes between the layouts i suppose it might have not been even necessary. But some advice on that would be helpfull too!

Any comment and advice is welcome :)