Html – I want to fit and clip/crop an image inside a div which is a grid element as well. I have tried using "overflow" but it does not work

So, I am trying to complete a bento grid challenge from frontend mentor. In one part it requires me to clip/crop an image element and it should not overlap outside the div. I am allowed to use only HTML and CSS for it. Many people have used tailwind for this but I am trying to create it from scratch.

This is what I have done

HTML:

<!-- This div is in a grid container   -->
    <div class="box bento3">
      <h2>Maintain a consistent posting schedule.</h2>
      <img src="./assets/images/illustration-consistent-schedule.webp">
    </div>  

CSS:

  .bento3 > img {
    background-size: cover;
    width: 100%;
    height: auto;
    margin-top: 14px;
  }

This is what it should actually look like

Keep in mind this is not cropping. The image should come up with different screen sizes. For example if I reduce the screen size it looks like this:

For 768px screen size

For 610px screen size

Let me know what I should do to achieve this.