Match Image Height To Text Height In CSS Grid Columns

Question

Update I don't want to use display flex

How do i match the height of the image, on desktops with the height of the title? On mobiles, the full image height is ok but on desktops, the image in the right column is much taller than the title text as seen in this image.

I'm using CSS grid-template-areas with 2 columns on desktop and 1 on mobiles.

.hero-title-image {
    display: grid;
    grid-template-areas:
    'hero-title hero-image';
}
    
.hero-title-container {
    grid-area: hero-title;
    width: 100%;
    font-size: 50px;
}

.wp-hero-image {
    grid-area: hero-mage;
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}
    
@media only screen and (max-width: 960px) {  
   
    .hero-title-image {
        display: grid;
        grid-row-gap: 30px;
        grid-template-areas:
        'hero-title' 
        'hero-image';
    }
    
    .hero-title-container {
        grid-area: hero-title;
        width: 100%;
        text-align: center;
    }

}

<div class="hero-title-image"><div class="hero-title-container">We help business owners in growth mode break through to the next level.</div><img src="https://i.ibb.co/2359H9t/woman.jpg" class="wp-hero-mage" />
</div>

I don't want to use display: flex;. I'm using display: grid;