Product preview card for desktop and mobile

I did have an img tag within the HTML page, but I removed it due to not being able to change the src of the image as the media screen changed from mobile to desktop. I do wonder however if it would be possible to have changed this without the need for JavaScript and strictly CSS.

I also used CSS variables but had to resort to manually inputting the hsl for the button hover. I did attempt to use hsla with the variable within in it and then just change the alpha but didn't have the desired effect. I wondered if I missed something or if there is a better approach to darkening the background without effecting the text color of the button.

Edit - Updated CSS Layout