google fonts,

👾Hello YuvCarl, congratulations for your new solution!

Here's my tips to you improve the qrcode image responsiveness and the card:

Use the proper color for the background: background-color: rgb(214 231 239);

Replace the width with max-width: 350px; to make it responsive:

.card {
    padding: 16px;
    max-width: 350px;
    /* height: 560px; */
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 12px;
}

The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 350px will not grow or contract because the size will be ever the same, but a container with max-width: 350px or min-width: 350px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

Make the image resize with the container by adding max-width: 100% and display: block

img {
    max-width: 100%;
    /* width: 95%; */
    /* height: 350px; */
    /* margin: 10px; */
    /* padding: 15px; */
    border-radius: 14px;
    border-radius: 12px;
    display: block;
}

👋 I hope this helps you and happy coding!