Base Apparel coming soon page using CSS Grid

It was an interesting challenge, but I did run into a few difficulties. For example, the image would not take up the full height of the page with just width: 100%; height: 100%; object-fit: cover;, so I ended up setting display: flex on its container in order to take advantage of the default behavior and make it stretch to fill the entire height of the page.

Another small issue is the outline around the input. My intention was to make it appear only when a user focuses the input using the keyboard, so I specifically used the :focus-visible pseudo-class. As far as I know, this pseudo-class only matches when a user interacts with an element via the keyboard, but for some reason, the outline also shows up when the input is clicked and I'm not really sure why. Any explanation and feedback on this would be greatly appreciated.