<div class="wrapper">
<div class="grid">
  <div class="item"><img src='https://images.unsplash.com/photo-1517497869-caaa5dacda85?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1555931156-73ca648e3c9c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1589100534833-475e31a17b4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
</div>

<div class="grid">
  <div class="item"><img src='https://images.unsplash.com/photo-1517497869-caaa5dacda85?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1555931156-73ca648e3c9c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1589100534833-475e31a17b4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
</div>

<div class="grid">
  <div class="item"><img src='https://images.unsplash.com/photo-1517497869-caaa5dacda85?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1555931156-73ca648e3c9c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
</div>

<div class="grid">
  <div class="item"><img src='https://images.unsplash.com/photo-1517497869-caaa5dacda85?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1555931156-73ca648e3c9c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1589100534833-475e31a17b4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzI2OTc&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
</div>
</div>

* {
  box-sizing: border-box;
}

body {
  --pad: clamp(0.5rem, 2vw, 2rem);
  --pad-sm: calc(var(--pad) / 2);
  --pad-xs: calc(var(--pad) / 4);
  margin: 0;
  padding: var(--pad);
  background: darkorchid;
  min-height: 100vh;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill,
    minmax(min(100%, 35rem), 1fr)
  );
  gap: var(--pad);
  max-width: max(84rem, 75vw);
  margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.grid {
  aspect-ratio: 3 / 2;
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(3, 1fr);
  gap: var(--pad);
  border: max(var(--pad-xs), 0.25rem) solid;
  padding: var(--pad);
  background: white;
}

.item {
  background: deeppink;
  position: relative;
  border-radius: var(--pad-xs);
  overflow: hidden;
}

.grid:nth-child(2) .item:nth-child(3) {
  grid-row: span 2;
}

.grid:nth-child(3) .item:first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.grid:nth-child(4) .item:nth-child(2) {
  grid-column: span 2;
}

.grid:nth-child(4) .item:nth-child(3) {
  grid-column: span 2;
}