выравнивание сетки попутного ветра и размер изображения

Question

У меня есть сетка с 3 столбиками, которые выглядят так:

Как вы видите, изображения не одного размера, я бы люблю, чтобы они заполняли блок, а также внизу, блок 1 и блок 2 плохо выровнены, потому что один имеет больший заголовок, чем другой. Моя цель состоит в том, чтобы осветить эти блоки, чтобы блок 2 был немного ниже. Родители имеют одинаковую высоту, и это то, что я пробовал:

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-8">
        <product-tile
                v-for="product in productsOverview"
                v-bind:key="product.id"
                :product="product">
        </product-tile>
    </div>

Компонент ProductTile:

<template>
    <div>
        <img v-if="product.imageUrl" class="" :src="product.imageUrl" :alt="product.name" />
        <img v-else class="w-full" src="/images/product.jpg" alt="">
        <div class="px-6 py-4">
            <div class="font-bold uppercase text-sm mb-2 text-yellow-500" v-html="product.subtitle"></div>
            <div class="text-xl mb-2" v-html="product.name"></div>
        </div>
        <div class="px-6 py-2">
            <span v-html="'blok ' + product.number" class="uppercase inline-block bg-gray-200 rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2"></span>
        </div>
    </div>
</template>