Can't figure out why my pictures wont get bigger - html

Question

I've been trying to get these pictures to become more prominent, but nothing I've done works. I want this:
desired result
but I'm getting this:
what I have
I've tried messing with width and height, and I thought it was the container causing the issue, but I couldn't find anything there.
Could anyone help me figure out why this is happening and how to prevent this in the future?
Here's the code:
#pop-rec {
padding-top: 10rem;
}
.pop-rec-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
}
.pop-rec-left {
display: flex;
gap: 1rem;
}
.pop-rec-item {
background-color: var(--primary-50);
padding: 1.2rem;
padding-top: 5rem;
border-radius: 12px;
/*width: 45%*/
margin: 0 auto;
}
.pop-rec-item-img {
margin-top: calc(-50% - 2rem);
margin-bottom: 1.0rem;
border-radius: 12px;
width: 100%;
}
.pop-rec-item-img img {
object-fit: cover;
}
.pop-rec-item-title {
font-size: 1.4rem;
color: #360215;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-itme-totaltime {
color: var(--primary-600);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-img1 .pop-rec-img2 {
height: max-content;
width: max-content;
}
<section id="pop-rec">
<div class="container">
<div class="pop-rec-wrapper">
<div class="pop-rec-left">
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img1" />
<h2 class="pop-rec-item-title">
Southern Style Sweet Tea
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 20 mins</h3>
</div>
<p class="pop-rec-item-desc">
Every gal in the south has her way of making sweet tea. We're pretty proud about it, too. Around my house, we like our tea strong and sweet. So if you ever have trouble getting your tea just right every time, give this recipe a try.
</p>
</div>
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img2" />
</div>
<h2 class="pop-rec-item-title">
Grandma's Collard Greens
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 3 hours 15 minutes</h3>
<p class="pop-rec-item-desc">
These authentic Southern Collard Greens are braised in savory meat flavored and perfectly spiced pot liquor resulting in a fantastic tender silky texture!!! Serve with this cornbread or corn muffins and hot sauce for an authentic home meal. Are you looking
for the real deal? This is a true Southerner’s dream!
</p>
</div>
</div>
<div class="pop-rec-right">
<h2 class="pop-rec-title">Popular Recipes</h2>
<p class="pop-rec-text">
Our weekly trending recipes.
</p>
Explore more
</div>
</div>
</div>
</section>

Answer 1

A bit hard to debug, but can you try adding this or updating your class.
.pop-rec-item-img img{
object-fit: cover;
display: block;
}

Answer 2

Neat! It looks like the only content that is off is your image, right?
So I would target the image directly by doing either
img { width: 100%; }
Or, be more specific by pairing with your class (recommended so as to not mess with all your website's images)
.pop-rec-item img { width: 100%; }
I would also recommend removing margin-top: calc(-50% - 2rem); which is pushing your image up and out of your pink box
I also suspect that the padding of the parent divs may be what is forcing the image to be so small. On your web browser, you can right click and select inspect to visually see where padding is on your element

Answer 3

This actually solved the problem ( align-items:baseline; )
#pop-rec {
padding-top: 10rem;
}
.pop-rec-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
}
.pop-rec-left {
display: flex;
gap: 1rem;
align-items:baseline;
}
.pop-rec-item {
background-color: var(--primary-50);
padding: 1.2rem;
padding-top: 5rem;
border-radius: 12px;
/*width: 45%*/
margin: 0 auto;
}
.pop-rec-item-img {
margin-top: calc(-50% - 2rem);
margin-bottom: 1.0rem;
border-radius: 12px;
width: 100%;
}
.pop-rec-item-img img {
object-fit: cover;
}
.pop-rec-item-title {
font-size: 1.4rem;
color: #360215;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-itme-totaltime {
color: var(--primary-600);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-img1 .pop-rec-img2 {
height: max-content;
width: max-content;
}
<section id="pop-rec">
<div class="container">
<div class="pop-rec-wrapper">
<div class="pop-rec-left">
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img1" />
<h2 class="pop-rec-item-title">
Southern Style Sweet Tea
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 20 mins</h3>
</div>
<p class="pop-rec-item-desc">
Every gal in the south has her way of making sweet tea. We're pretty proud about it, too. Around my house, we like our tea strong and sweet. So if you ever have trouble getting your tea just right every time, give this recipe a try.
</p>
</div>
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img2" />
</div>
<h2 class="pop-rec-item-title">
Grandma's Collard Greens
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 3 hours 15 minutes</h3>
<p class="pop-rec-item-desc">
These authentic Southern Collard Greens are braised in savory meat flavored and perfectly spiced pot liquor resulting in a fantastic tender silky texture!!! Serve with this cornbread or corn muffins and hot sauce for an authentic home meal. Are you looking
for the real deal? This is a true Southerner’s dream!
</p>
</div>
</div>
<div class="pop-rec-right">
<h2 class="pop-rec-title">Popular Recipes</h2>
<p class="pop-rec-text">
Our weekly trending recipes.
</p>
Explore more
</div>
</div>
</div>
</section>