CSS-сетка реагирует на заданную максимальную ширину и соотношение сторон

Question

У меня проблема с CSS Grid. Я определяю сетку

.cover {
  max-width: 1080;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

И внутри этой сетки у меня есть несколько блоков

.horizontal {
  grid-column: span 2;
  grid-row: span 1;
}
.large {
  grid-column: span 2;
  grid-row: span 2;
}
.vertical {
  grid-column: span 1;
  grid-row: span 2;
}
.small {
  grid-column: span 1;
  grid-row: span 1;
}

Каждый блок имеет изображение внутри, и у меня есть только две переменные: максимальная ширина сетки, 1080px, и соотношение сторон маленького блока, 360 x 280. Как сделать эту сетку отзывчивой, сохраняя соотношение сторон блоков?

Мой HTML легко

<div class="cover">
 <div class="horizontal"></div>
 <div class="small"></div>
 <div class="small"></div>
 <div class="horizontal"></div>
 <div class="small"></div>
 <div class="small"></div>
 <div class="small"></div>
</div>