I’m facing unexpected gaps when building embedded css grids.

The layout is made of cards (3 cards per row) and each card sub-elements (orange / grey / black into my example) have to be aligned between each other (into the same row). The expected maximum height of a row should be based on the content of it’s cells. But height is much bigger than the cells content:

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-auto-rows: 1fr;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }

<div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>

What do I have to correct to this layout to not have those unexpected gaps?