Mobile first, flexbox + js

Is there a way to say use X width in small displays, and Y width on larger displays? I tried various combinations of width: clamp/min/max/min(max())/max(min()) in an effort to avoid doing it in media queries but couldn't figure it out (using width: 90vw for < 600px, 75vw for 600-1050px and 50vw above that).

—

Why does my input field for email turn blue when you start to enter something? AFAIK I don’t set that.

--

Slightly irked that despite having the desktop image match before submission, they don't here. I assume its because I used margin-top: auto for the footer section, rather than specifying a specific size.

—

Is there a better way to handle the hiding / showing of the error message? The input field, the error message and notify button are in a flex column (mobile) or row (desktop). The error message div is set to take up zero space so it doesn’t affect positioning of the other two items, and when in a row I use flex ordering to put the error message first in the row.

Then when an error occurs I apply a css class that moves the message’’s location down. (And when in column, I push the notify button down like the design shows). It works, but feels hacky.