I'm struggling with getting the image in the right position and cropping it at the top and bottom. This is what it should look like (hero part): https://www.behance.net/gallery/161732057/CozyMornings-online-store

The entire project is built on the grid.

I need a circular image moved to the left, larger than the container and cropped at the top and bottom. Additionally, it should be responsive.

I'm trying to put an image into a wrapper. Give this wrapper a relative position and hide the overflow. This doesn't work.

.hero-image-wrapper {
  border: 0.3rem solid #968273;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 150%;
  position: relative;
  overflow: hidden;
  top: -25%;
  left: -10%;
}

.hero-image {
  transform: scaleX(-1);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

<div class="hero-image-wrapper">
  <img class="hero-image" src="../images/pexels-ekaterina-bolovtsova-6976906-mobile.jpg">
</div>

thanks for your help!