Hi
The biggest problem I see here is that you've added a hover style to the li elements not the anchors. The whole block needs to be clickable, not just the text in the center of each list item.
You also must not do this:
height: 100vh;
width: 100vw;
Never limit the height of elements that contain text, including the body. This solution breaks on smaller screens especially in landscape orientation because of the height 100vh. Instead, change it to min-height.
The body is already full width. Don't use 100vw ever as that can only cause overflow (unwanted horizontal scroll) whenever a scrollbar is present for some users.
The card must not have a height or width. Use max width in rem and let the browser decide how tall the card needs to be based off the content inside.
Add some padding to the body or margin to the component so it can't hit screen edges.
Look up how to write alt text on images. There is a good post about this in the discord resources channel.
It's strange how youre using padding and margin at the moment. Maybe have a read of this and make sure you understand the differences / when to use each: https://fedmentor.dev/posts/padding-margin/
