CSS заставляет изображение плавать вне контейнера ⇐ CSS

[Anonymous]

У меня есть это

Код: Выделить всё

img {
display: block;
max-width: 100%;
}

.hero {
padding-inline: 2rem;
margin-inline: auto;
margin-block: 10rem;
border: 1px solid blue;
}

.hero-layout {
display: grid;
gap: 2rem;
grid-template-columns: 1fr 2fr;
max-width: 800px;
border: 1px solid red;
margin-inline: auto;
}

Код: Выделить всё

Lorem Ipsum
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non tenetur?

[img]https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D[/img]

Это результат
Я хочу добиться этого (сделал с помощью фотошопа), какой подход лучше всего?
Я пробовал использовать относительное положение и отрицательный верх, но это не уменьшает размер элемента div Hero-Layout.< /п>

Подробнее здесь: https://stackoverflow.com/questions/783 ... -container