Css 网格纵横比，文本和图像覆盖所有空闲空间

我试图得到一个带有文本和图像的卡片网格，其中图像覆盖了所有卡片的空闲空间。但是我无法显示文本，文本从卡上滚动，卡上有一个

溢出：隐藏
。（）


.grid{
显示：网格；
网格模板列：重复（自动拟合，最小值（275px，1fr））；
间隙：24px；
}
.细胞{
位置：相对位置；
溢出：隐藏；
边界半径：6px；
填充顶部：100%；
背景：红色；
}
.链接{
文字装饰：无；
颜色：继承；
}
.内容{
位置：绝对位置；
顶部：0px；
宽度：100%；
身高：100%；
}
.形象{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.文本{
填充：16px；
}
和此最终版本


.grid{
显示：网格；
网格模板列：重复（自动拟合，最小值（275px，1fr））；
间隙：24px；
}
.细胞{
位置：相对位置；
溢出：隐藏；
边界半径：6px；
填充顶部：100%；
背景：红色；
}
.链接{
文字装饰：无；
颜色：继承；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
显示器：flex；
弯曲方向：立柱；
}
.形象{
宽度：100%；
身高：100%；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.文本{
填充：16px；
高度：适合的内容；
框大小：边框框；
}

使图像位置为绝对位置，并增加图像的z索引text@TemaniAfif，似乎不起作用：位置：相对于文本或相反，想法是一样的，它是为了避免一个或另一个溢出：或再次使用网格作为内容当您这样做时，文本显示，但在图像上方。我想要的是文本占据它自己的空间，而图像占据其余的空间。我添加了一个显示它的图像，使其更清晰。