how to size next js 13 images - html

Question

I am building a responsive website and I have been struggling to get the sizing right.
This is how my image looks like on mobile, which is correct:
Now when I switch over to desktop screen view, the image is way too big.
I will try describe how I want the image to behave:
On mobile screen on bottom of screen, just like it is now.
On Desktop screen, I want to image on bottom right corner of the current view. Basically in the red rectangle I have drawn. I don't want it to have it fixed height and width because I need it to grow and shrink responsively.
this is the relevant html code
<section class="page_hero-section__MZdi7">
<div class="page_hero-con__ijIdx">
<a>particulieren</a>
<h2>(zorg-)organisaties</h2>
<p>Ontlast de werkvloer. Onze x komen op locatie en zorgen voor een stralende lach voor clienten én medewerkers.</p>
<button>werkwijze</button><button>get started</button>
</div>
<div class="page_hero-join-con__AkBR0">
<Image alt="cool girl with colorful glasses"
src={coolGirlGlasses}
\>
<div>
<p>werken bij ons?</p>
<span>
<hr>
</span>
<a>join the crew</a>
</div>
</div>
<div class="page_hero-werkwijze__IoSuu">
<p>werkwijze</p>
<div class="page_hero-werkwijze-line__ccNUj"></div>
</div>
</section>
this is the relevant css
.hero-section {
position: relative;
display: flex;
height: calc(100vh - var(--header-height));
flex-direction: column;
justify-content: space-between;
}
img {
display: block;
max-width: 100%;
height: auto;
}
If i give the image a height of 100% it is bigger than its container.
I have also tried giving the image object-fit: contain but it changed nothing.

Answer 1

fixed it.
By adding flex: 1 to the parent element hero-join-con of the img and adding fill={true} on the <Image /> react element and adding object-fit: contain and object-position: right bottom to hero-con-join img.
object-fit didn't work out earlier because I was missing the fill={true} property.