Semantic HTML5 markup, CSS custom properties, Flexbox

In css there are a few more important issues to refactor.

• This solution currently overflows my screen at the top so there's some content cut off that I can't reach. That's caused by using position absolute. Don't use that technique to center the component on the screen. Instead make the body min-height 100svh and a flex column, using flex related properties to center the contents.
• get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
• this card mustn't have a height. That's important to understand that you shouldn't limit the height of elements that contain text. Let the browser do it's job and decide what height is needed based on the content and spacings inside. As soon as you limit the height the card has the potential to break, like if an author changes the amount of text in there or a user changes their default text size or translates the site into another language.
• the card shouldn't have a width either. Give it a max width in rem instead. That way, it can shrink narrower if it ever needs to like on a small screen.
• there's no benefit to making the card a flex column unless you're planning on using the gap property. Block elements stack vertically by default so there's no need.
• this card has no interactive elements, is not clickable, so it shouldn't have a hover style.
• make sure you understand the difference between padding and margin. The card should have padding but the children within it have vertical margins.
• the image doesn't need a width or height in this. It can have a width 100% if you like, and aspect ratio 1. But it mustn't have an explicit width or it won't be able to adapt to the size of the card.
• Font size shouldn't ever be in pixels. Use rem instead.