Je travaille à placer l'image dans la bonne position et à la recadrer en haut et en bas. Voici à quoi cela devrait ressembler (partie héros) : https://www.behance.net/gallery/161732057/CozyMornings-online-store

L'ensemble du projet est construit sur la grille.

J'ai besoin d'une image circulaire déplacée vers la gauche, plus grande que le conteneur et recadrée en haut et en bas. De plus, il doit être réactif.

J'essaie de mettre une image dans un package. Donnez à ce wrapper une position relative et masquez le débordement. Cela ne fonctionne pas.

.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>

Merci pour votre aide !