QR code component

Nice job @NellyisDevv

I would avoid using the <center> tag as it's well out of date, and no longer recommended.

To display your QR code a tiny bit better on really small screen widths (around 320px) I would do something like this:

.qr-container-background {
    background-color: var(--White-);
    padding: 20px;
    border-radius: 20px;
    max-width: 320px; /* Set max width of card */
    width: 100%; /* Full width up until 320px */
}

.qr-container-photo img {
    border-radius: 10px;
    width: 100%; /* Set image to fill width of the container */
    height: auto;
}

For a small project like this, I think your CSS file set up is absolutely fine!

Also, you've got a few Accessibility/Html issues that you could resolve for a perfect score.