如何让绝对定位的背景图实现响应式布局

我需要实现一个由五张图片组成的类网格布局，预期效果如下：

我原本认为这类设计只能通过absolute定位实现，但该方案在屏幕尺寸（高度或宽度）变化时会出现图片重叠或间距增大的问题，例如在超大屏上会出现如下间隙：

以下是我当前的「静态/硬编码」实现方案，但我认为这并非最优解，希望得到更好的实现思路指导：

现有CSS代码 #

.imageGrid {
  overflow: hidden;
  padding: 120px 0 814px 0;
  position: relative;
}
.imageGrid__images-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.imageGrid__images-img-1 {
  width: 280px;
  height: 320px;
  top: 485px;
  left: 0;
}
.imageGrid__images-img-2 {
  width: 427px;
  height: 319px;
  top: 485px;
  left: 310px;
}
.imageGrid__images-img-3 {
  width: 737px;
  height: 342px;
  left: 0;
  bottom: 30px;
}
.imageGrid__images-img-4 {
  width: 500px;
  height: 527px;
  right: 0;
  top: 119px;
}
.imageGrid__images-img-5 {
  width: 600px;
  height: 500px;
  right: 0;
  top: calc(500px + 119px + 30px);
}

现有HTML代码 #

<section class="imageGrid">
  
 
    <div class="imageGrid__images">
      <div class="imageGrid__images-img imageGrid__images-img-1" loading="lazy" style="background-image: url('https://i.imgur.com/k7fNrV9.png');"></div>
      <div class="imageGrid__images-img imageGrid__images-img-2" loading="lazy" style="background-image: url('https://i.imgur.com/knI2LcY.png');"></div>
      <div class="imageGrid__images-img imageGrid__images-img-3" loading="lazy" style="background-image: url('https://i.imgur.com/Hyn2v1J.png');"></div>
      <div class="imageGrid__images-img imageGrid__images-img-4" loading="lazy" style="background-image: url('https://i.imgur.com/oZG4m8k.png');"></div>
      <div class="imageGrid__images-img imageGrid__images-img-5" loading="lazy" style="background-image: url('https://i.imgur.com/dOvSc80.png');"></div>
  </div>
  
</section>

内容的提问来源于stack exchange，提问作者Freddy