Four Card using HTML and CSS

I think for positioning at different sizes you kinda need to play around to get it just right.

For this challenge try using flex-direction: column; and justify-content: center; - this will force the 4 cards to split into 3 columns with the 4th card taking up space in the middle/second column. You can then move the cards in the first and third columns down, to get the final look. If that makes sense give it a try it should work without changing any other code.

I like the hover effect with the borders! if you dont want the box to change sizes on hover, you can add transparent left, right and bottom borders at the same thickness, for example:

.box {
  border: 2px solid transparent;
  border-top: 2px solid black;
}

.box:hover {
  border: 2px solid black;
}