Responsive "Base Apparel Coming Soon" Page

Hi, this one was a really cool challenge. This time I tried to use grid for positioning everything, It's better (for me) than flexbox for this type of layout. However, I had some issues.

First: vertical align the logo. I did a messy solution, but I think it could be better, if you have a better one, please let me know.

Second: the ":invalid" pseudo-class loads before any interaction with the input field. I don't know if there is a way to apply the invalid pseudo-class without JS. I love JS but I just want to know if there is other way hahaha.

If you have a solution or tips for my issues, I'll appreciate it!