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

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