Responsive product preview card with Sass

What are you most proud of, and what would you do differently next time?

I tried styling with Sass. On this project used only Sass variables, next time would like to try also nesting and mixing.

Card images for mobile and desktop view are added with CSS:

.card-image { 
    content:url('images/image-product-mobile.jpg');
} 

I used mobile first approach. This way mobile view responsiveness was easily achieved with flex-direction default styling.

.card {
  display: flex;
  flex-direction: column;
}

What challenges did you encounter, and how did you overcome them?

Most challenging for me was to make responsive the larger views, because the width varies in very wide scale. I tried to adjust card text area padding and text size with media queries but I´m not quite pleased with the final result.

What specific areas of your project would you like help with?

There are so many different devices with different screen resolutions that people use? How to make the responsive component styling simpler? What tricks and tools to you use? I use Chrome DevTools to test the views.