.shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 8em;
  grid-row-gap: .5em;
  margin: 2em auto;
  width: 90%;
  position: relative;
  border: 12px solid #C4A484;
}

.book-container:nth-child(4n + 1):before {
  content: '';
  height: 8em;/* matching row template */
  width: 100%;
  border-bottom: 12px solid #C4A484;
  position: absolute;
  background-color: #9E846A;
  z-index: -1;
}

.book {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 90%;
  max-width: 60%;
  margin: 0 auto;
  transform: translateY(12px);
  aspect-ratio: 5 / 7;
}

.book img {
  margin-bottom: 0;
  max-height: 100%;
  width: 100%;
}

@media screen and (max-width: 660px) {
  .shelf {
    grid-template-columns: repeat(2, 1fr);
  }

 .book-container:nth-child(4n + 1):before {
  }

 .book-container:nth-child(2n + 1):before {
    content: '';
    height: 8em;/* matching row template */
    width: 100%;
    border-bottom: 12px solid #C4A484;
    position: absolute;
    background-color: #9E846A;
    z-index: -1;
  } 
}