Responsive NFT Card using CSS Flexbox

Some of the challenges I faced are:

• getting the image overlay to stop overflowing at the smaller sizes

• keeping ".view" that's on the image overlay at opacity:1 while the rest of the overlay becomes more transparent. I tried separating ".view" from the overlay and using absolute positioning and z-index to position it on top of the image overlay, but instead it took a cyan tint, and it didn't fix the opacity issue.

• Is there a better way to create the box shadow layers? I ended up changing the value of the color used for the shadow slightly and it's not quite the same as the expected results in the screenshots provided for the challenge.

Any feedback would be greatly appreciated,

Thank You

Updates*

• Opacity issue on hover has been corrected.