All solutions

I used flexbox to get the buttons on the same level in all the 3 cards. Also thought of using position:absolute for the buttons and align them with the bottom of the card.

Any alternate better approach that can be used for aligning the buttons to the same level?

Had a few difficulties adding the overlay effect on image on hover. Also first time using scss, probably not useful for such a small project but it was still fun to learn.

This was a good exercise to practice responsive images based on screen sizes. Found a really good article on mdn for it - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images.

On Github pages the google font is showing up weirdly as compared to how it looks in my local.

I think I might have unnecessarily complicated things a lot and even after trying a lot I just couldn't get the colors and gradient effect to match. Any feedback is greatly appreciated.