Responsive Card built with Vue.js and Tailwind.css

I found a few things quite challenging with this on. Do you have any tips on how I could have done the following better.

1. How to best conditionally display the mobile or desktop version of the image. I used the 'hidden' css property, but read that this still consumes bandwidth to load the hidden image.
2. How to best load fonts from Google. I used the <link> tag in the index.html file because there was also the option to include the 'preconnect' property which sounded useful for performance.
3. I generally struggled a lot with situating the mobile and desktop images in the right place on the screen, and coloring them correctly with the filter.

It was my first time using Vue.js for a static site so it felt like a big success. Much easier than writing raw html!