<div class="outer">

  <img src="https://fakeimg.pl/350x474">
  <div class="mid">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
    <img src="https://fakeimg.pl/100x50">
  </div>
  <img src="https://fakeimg.pl/350x474">

</div>

.outer {
  max-width: 1580px;
  margin: auto;
  border: 1px solid red;
  display: grid;
  gap: 1rem;
  grid-template-areas: " col1 col2 col3";
  grid-template-columns: auto 1fr auto;
}
.outer > img {
  max-width: 350px;
  width: 100%;
  height: auto;
}
.outer > img:first-child {
  grid-area: col1;
}
.outer > img:last-child {
  grid-area: col3;
}
.mid {
  grid-area: col2;
}
.mid img {
  display: block;
  margin: 0 auto 2rem;
}

/*

forum question answer only:


https://www.sitepoint.com/community/t/how-to-place-images-in-the-middle-stacked-separated-by-space/425355



*/