Responsive card grid with full image height on hover - html

Question

I'm hoping to get some advice on creating a responsive card that will display the full height of an image on hover. I've been working on it for the past hour and have come up with a solution, which you can see in my jsfiddle file. However, it's not quite as responsive as I'd like it to be. I'd really appreciate any tips or recommendations you might have.
Here is my take: jsfiddle
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 2rem;
}
.card {
position: relative;
background: #eee;
display: flex;
flex-direction: column;
height: 420px;
}
.card .thumbnail {
position: relative;
width: 100%;
height: 275px;
}
.card:hover {
z-index: 999;
}
.card:hover .thumbnail {
height: auto;
}
.card:hover .details {
top: 100%;
}
.card .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: height 0.3s ease-in-out;
}
.card .details {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
background: blue;
bottom: 0;
height: 170px;
}
.card .details h1 {}
<div class="card-grid">
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="#" alt="Card Thumbnail">
</div>
<div class="details">
<h1>Card Title</h1>
<p>Card description goes here</p>
</div>
</div>
</div>
I am using position: absolute in order to prevent the card height from changing and disrupting the grid layout.
Thank you!