CSS Hakkında soru: Yapılabilir mi?

Şimdi bir sayfada aşağıdaki gibi bir görsel ve üzerinde yazı var.



Yazılar her gün değişiyor ve bazı yazılar 3 satır olduğu için 2 satırlık yazı görselin üst kısmında kalıyor ve altında boşluk oluyor.

Bu yazının her zaman grafiği ortalaması mümkün mü? Yani 2 satır da olsa 3 satır da olsa grafiğe göre ortalanması yapılabilir bir şey mi?

<div class="container">
  <div class="card">
    <img src="product.jpg" alt="Ürün Görseli">
    <div class="product-info">
       <p>Ürün Açıklaması</p>
       <p>Ürün Açıklaması</p>
       <p>Ürün Açıklaması</p>
    </div>
  </div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
}
.card {
  border: 1px solid #ccc;
  padding: 20px;
}

Öncelikle çok teşekkür ederim. Aslında tek bir cümle var yani tek bir <p>. Cümlenin satıra sığmayan yerleri alt satıra kayıyor. Bu iş görür mü yine?

Ben yanlış anlamadım değil mi? Resim yazıların üstünde olacak. Arkaplan olarak değil? Şimdi okuyunca arkaplan olacak gibi anladım.

Evet görsel arkada, yazı üstte.

<div class="container">
  <div class="card">
      <p>Ürün Açıklaması</p>
  </div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
}
.card {
  border: 1px solid #ccc;
  padding: 20px;
  background-image: url('product.jpg');
  background-size: cover;
  background-position: center;
}

Çok teşekkür ederim. Deneyip (denettirip) size bilgi vereceğim.