I have the following HTML / Bootstrap code.

<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-1">
    @foreach (var image in Images.OrderByDescending(x=>x.Date))
    {
        <div class="card font-degular mb-2">
            <img id="@ImageDetails.Slug" src="@ImageDetails.Url" class="card-img-top" alt="@ImageDetails.AltText" />
            <div class="card-img-overlay w-100 h-25 opacity-card" style="padding-bottom: 20px;">
                <h5 class="card-title">
                    <a class="fw-bolder fs-4 text-black text-decoration-none" @onclick='()=>NavManager.NavigateTo($"/studio/{ImageDetails.Slug}")' href="/studio/@ImageDetails.Slug">
                        @ImageDetails.Description
                    </a>
                </h5>

                <small class="card-text text-black">@ImageDetails.Date.ToString("ddd dd MMMM yyyy")</small>
            </div>
        </div>
    }
</div>

Which produces the following output:

In terms of the image in the middle which has an orientation of Portrait, how do I make the other cards auto fit next to it, rather than starting at the bottom?

Could it possibly be some kind of d-flex on the row?