<div class="outer">

  <div class="book1"></div>

  <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>
  <div class="book2"></div>

</div>

.outer {
  max-width: 1580px;
  margin: auto;
  border: 1px solid red;
  display: grid;
  gap: 1rem;
  grid-template-areas: " col1 col2 col3";
  grid-template-columns: minmax(200px, 540px) 1fr minmax(200px, 540px);
}
.book1 {
  grid-area: col1;
  height: 500px;
  background-image: url("https://fakeimg.pl/167x123/eb0707/909090");
  background-size: 180px 250px;
}

.book2 {
  grid-area: col3;
  height: 500px;
  width: 540px;
  max-width: 100%;
  background-image: url("https://fakeimg.pl/167x123/074feb/909090");
  background-repeat: repeat;
  background-size: 180px 250px;
}

.mid {
  grid-area: col2;
}
.mid img {
  display: block;
  margin: 0 auto 2rem;
}
.mid img:last-child {
  margin-bottom: 0;
}

/*

forum question answer only:


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



*/