Responsive bento grid layout

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

At first I had quite a hard time making how an image that was larger than its wrapping element could be cut off from the part that came out of the wrapping. I have tried using common methods such as adding the overflow: hidden; property, but that didn't work. Until finally I found the clip value for the overflow property which functions to cut the part of the image that comes out/passes the wrapping element.

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

I'm looking for guidance on how to implement the .card-3 section so that the image inside it behaves as expected. Specifically, on wide screens (desktop view), I want the image to have width: 100%, but with the lower part of the image being cropped, as shown in the design reference provided in this project.

I'm currently unsure how to achieve this layout behavior for the .card-3 element and would really appreciate any help or suggestions.

Thank you in advance for your time and support! 🙏🙏.