First Review Request - QR Code - Semantic markup, Grid, Flex

Hello all! This is my first submission to Frontend Mentor!

About: I've been interested in web development since the early 00's, but never gotten around to learning. Now, I'm working to change that!

QUESTIONS:

1. Is the markup semantic and accessible? I was unsure about how to markup the text on the card. I used an <H1> and a <span> for the body text. I suspect that the span should've been a <p> since it is content.

2. It was unclear to me whether or not to use <main> for the card itself, so I used a <div>. I haven't dealt with components, so I'm learning how to mark up and style them. I've only had experience writing traditional websites (back in the days when floats were all the rage) - not web apps.

TOOLS USED: CSS Grid, Flexbox, CSS Reset, and Custom Properties.

TO-DO: I tried to organize the CSS file in an easy-to-read manner, but I'm still working on it. In the next project, I plan to incorporate Cube.css. So hopefully that will organize things a bit better. Also read more about accessibility best practices.

I'll post this solution on Slack as well.

Thank you for your time is looking over my project!