Как выровнять по высоте изображения в CSS Grid?

[Novum]

Здравствуйте!
Помогите советом новичку. Очень хочу разобраться с системой Grid.
Я сделала на страничке подобие галереи, всего из 3-х фотографий.
https://codepen.io/Novumel/pen/abzPWyw
Блок галереи - это один грид, а в нем создала еще три грида. Их область я заполнила фотографиями
.image {
width: 100%;
height: 100vh;
object-fit: cover;
display: block;
}
Изображения получаются равными по высоте, но деформируются по ширине. Если я делаю height: 100%, то изображения получаются симметричными, но разными по высоте.
Я, конечно, могла бы установить высоту отдельно для каждой фотографии в каждом медиа запросе. Но я-то надеялась, что CSS Grid как раз позволит сделать все проще. Но как - не пойму. Видимо, я упускаю некое основополагающее правило.
Кто шарит в гридах - подскажите, а то у меня уже мозг закипает))

[maks1331]

Можно каждому блоку задать в качестве фона изображение и выровнять его по центру.
Это решает вопрос с разными размерами картинок и всё будет смотреться хорошо, единственный минус - нужно задавать высоту и ширину для блоков.