Responsive stats preview card with Flexbox, Grid and media queries

Hi, everyone! 👋🏻

This was my first time using Grid in a Frontend Mentor challenge, and I can't wait to learn more about it. I have two questions about the card's image:

I inserted the image with background-image so that I could use background-blend-mode: multiply to create the purple color effect. For the containing <div> to match the size of the background image, I added it in the markup too — with the <picture> element — and set its visibility to none.

This feels like a hack — adding the image "twice" —, but it was the easiest way I could find to make the <div> match the background image size exactly. Questions:

• Since the images in the <picture> element and in background-image are the same, I imagine that this would not affect performance — the image would only be downloaded once. Is this correct?
• Is there a better way to make the <div> match the size of the background image?

Any other feedback will be much appreciated. Thank you!