HTML Markup with CSS Flexbox and variables for colours

I'm very glad to see you back in web development!! One never stops learning, congratulations!!

In terms of styles, at first glance, I would recommend reducing the opacity of your box-shadow and perhaps setting it to something like 1px 1px 15px hsl(220deg 15% 55% / 20%), i would also slightly decrease the border-radius.

In terms of HTML, I would recommend changing your h2 to h1, remembering that this helps with SEO.

And as extras, try this to add a special touch to your project:

Remember, you can add active states to your elements using the pseudo-selector :hover

main.qr-container:hover {   /* These styles will only be displayed when hovering */
    transform: scale(1.02);   /* We change the size to make the element a little bigger */
    transition: .3s ease; /* we added a transition so that the changes are not so abrupt */
    cursor: pointer; /* This will change the cursor type */
    box-shadow: 1px 1px 15px hsl(220deg 15% 55% / 50%); /*I would recommend making the shadow darker when in hover. */
}

I hope this is very helpful for you, friend!! Lastly, since you're returning to this, I recommend studying flexbox. It will allow you to create almost any interface with CSS.

Your HTML is filled with div tags to contain an element which doesn't even need it. Every img, h1, p element has a div tag and it doesn't really have any use. Just apply the CSS directly to that element, not on a parent.

Also, change that h2 tag into an h1. SEO-wise and accesibility-wise. You would usually just use an h2 tag for a subheading.

For box shadow, I'd reccomend using https://cssmatic.com/box-shadow. It is much easier than doing it manually and you can see it live.

"I am also open to adding animations and states to make the component more dynamic." Use the hover: pseudo selector in CSS if you want to do so

your design is good but heading color is not macth . fix it to locking very beautiful