Свойство сетки CSS: создание адаптивной полноэкранной «портретной» сетки изображений с сохранением соотношения сторон изображения от ширины экрана от 767 и выше

Question

Я хотел бы создать макет, подобный этому:

Описание макета:

1. Сетка, окруженная зазором в 30 пикселей
2. Каждая ячейка содержит изображение (430 X 882)

Я хочу, чтобы пользователь, который входит на страницу, видел только сетку и ее отступы (то есть область просмотра) с ширины экрана 767 пикселей ивверх, сохраняя зазор в 30px и соотношение сторон изображения (даже в странных соотношениях, когда ширина намного больше высоты).

Я не веб-разработчик, но поведение, которое я ищу, похоже на WPF ViewBoxвсе, что он делает, это «масштабирование по размеру содержимого».

Вот что я сделал:

   .grid-container {
        margin: 30px 0;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 30px 30px;
        grid-template-areas: "a1 a2 a3 a4";
    }    

    .background-cover {
       object-fit: cover;
       width: 100%;
    }


   <div class="grid-container">
   <div class="grid">
      <div class="grayscale grid-cell ">
         <img class="background-cover" src="http://via.placeholder.com/430x882">
      </div>
      <div class="grayscale grid-cell ">
         <img class="background-cover" src="http://via.placeholder.com/430x882">
      </div>
      <div class="grayscale grid-cell ">
         <img class="background-cover" src="http://via.placeholder.com/430x882">
      </div>
      <div class="grayscale grid-cell ">
         <img class="background-cover" src="http://via.placeholder.com/430x882">
      </div>
   </div>
</div>

Я не знаю, что делать, чтобы держать сетку в полноэкранном режиме.Я попытался установить высоту 90vh в сетку, но это не помогло.

Я на правильном пути?или я должен использовать что-то еще, например flex, или даже использовать JS?