CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか?

Question

私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付します。

実際には、これらすべてのカードが配置される大きなグリッド (CSS ではプロファイルグリッドと呼ばれます) があり、この大きなグリッドの高さは 255 ピクセルです。カードとカード内のグリッドの両方がこの 255 ピクセルの高さに従うようにしたいのですが、カード自体の高さは正しく取得できましたが、内側のグリッドの高さは正しくありません。内側のグリッド自体は 2 行で構成され、最初の行は画像で高さ 150 ピクセル、2 行目は 1fr に設定されていますが、内側のグリッドの高さを 255 ピクセルにすることができません。何か問題がありましたか？

https://i.stack.imgur.com/g9Eh6.png

以下は jsFiddle のリンクです: https://jsfiddle.net/40tnwd1o/

リーリーリーリー