Coming Soon Page using Flex and JavaScript

What are you most proud of, and what would you do differently next time?

Using this segment of code:

&:has(.button:hover) :is(.email__field:invalid, .email__field:placeholder-shown) {
  border-color: var(--clr-red); 
}

I was able to accomplish the border color change for an empty email or invalid email input using only CSS. Then in JavaScript, I handled the displaying of the error message based on the state.

What challenges did you encounter, and how did you overcome them?

I had problems dealing with the mobile design where the button and email input took up the same amount of space. How I overcame that was to take advantage of Flex's flex-basis and flex-grow so that at larger screen sizes, the email input is larger than the button, and at smaller screen sizes, they take up the same space. See code below:

form {
  display: inherit; 
  flex-wrap: wrap; 

  & > * {
    flex-grow: 1; 
  }   

  & .email__field {
    flex-basis: 40ch
  } 

  & .form__btn {
    flex-basis: 20ch
  }