Responsive landing with flex

Add a width: 100dvw; and height: 100dvh; to your stylesheet to fix the issue where the main card isn't fully centered to the screen. The parent container needs to have a specified size in order for flex to fully work.

It also appears that the border-radius might be a bit off, to get the main card's border radius to look uniform with the <img> border-radius, I would just double the <img> border-radius and set that to the main.

You might want to stylize the fonts for the different elements individually, that'll fix the size and weight issue of your <h1> element.

Last, but not least, use semantic HTML. Use the <main></main> elements instead of creating a div with class of main. Link to semantic HTML elements: https://www.w3schools.com/html/html5_semantic_elements.asp