CSS布局：在狭窄屏幕上的单独图像，并在大型上列

Question

如何仅使用CSS（无JS）获得以下布局，以及在下面的狭窄和大型视口的代码片段的相同的HTML标记？

• 标记为1/2/3的盒子是图像。可能有最大的5张图像，并且尺寸是不可预测的。他们标记了类：.img-0； .img-1; .img-2;等...

我尝试了以下代码，但是在大型视口上查看时，图像重叠，因为它们位于同一网格区域。

.panel-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
      "img-0"
      "title"
      "date"
      "text"
      "info-request"
      "img-1"
      "img-2"
      "img-3"
      "img-4";
   gap: 10px;
}
h1 { grid-area: title }
.state-default { grid-area: date }
.text { grid-area: text }
.info-request { grid-area: info-request }
.info-request button { display: block }
.img-0 { grid-area: img-0; }
.img-1 { grid-area: img-1; }
.img-2 { grid-area: img-2; }
.img-3 { grid-area: img-3; }
.img-4 { grid-area: img-4; }

@media (min-width: 168px) {
  .panel-body {
    grid-template-rows: repeat(6, minmax(0, auto)) 1fr;
    grid-template-areas:
        "img title"
        "img date"
        "img text"
        "img info-request";
  }
  .img-0 { grid-area: img; }
  .img-1 { grid-area: img; }
  .img-2 { grid-area: img; }
  .img-3 { grid-area: img; }
  .img-4 { grid-area: img; }
}

<div class="panel-body">
  <h1>This is the title</h1>
  <h3 class="state-default">24/05/2022</h3>
  <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
  <img src="https://via.placeholder.com/300x200/7ac943/ffffff" class="img-0">
  <img src="https://via.placeholder.com/300x300/ff931e/ffffff" class="img-2">
  <img src="https://via.placeholder.com/200x300/3fa9f5/ffffff" class="img-3">
  <div class="info-request">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</div>

我可以修复大型的视口布局，但后来我无法执行狭窄的视口布局。