#reading-list .s1 {
  background: #243553;
  height: 400px;
  min-height: 400px;
}

#reading-list .s1 .text-wrapper {
  max-width: 1400px;
}

#reading-list .books {
  padding: 7.5rem 0;
}

#reading-list .books .contain {
  width: calc(100% - 2rem);
  max-width: 1400px;
  margin: 0 auto;
}

#reading-list .books h2 {
  font-family: "Newsreader", serif;
  font-style: normal;
  font-weight: 300;
  font-weight: 200;
  font-size: 3rem;
  line-height: 1.3em;
  color: #243553;
  margin-bottom: 2rem;
}

#reading-list .books .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  row-gap: 2.5rem;
}

#reading-list .books .book .img-wrapper {
  background: #F4F8FF;
  padding: 1.5rem;
}

#reading-list .books .book .img-wrapper img {
  display: block;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 153 / 231;
}

#reading-list .books .book .content {
  padding-top: 1rem;
}

#reading-list .books .book .content h3 {
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-weight: 300;
  font-size: 1rem;
  color: #243553;
  transition: color .5s ease;
}

#reading-list .books .book .content p {
  color: #8997AE;
}

#reading-list .books .book:hover h3 {
  color: #107B9C;
}

#reading-list .books.cl {
  background: #F4F8FF;
}

#reading-list .books.cl .grid .book .img-wrapper {
  background-color: #fff;
}

@media screen and (max-width: 1100px) {
  #reading-list .books .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 980px) {
  #reading-list .books .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  #reading-list .s1 {
    height: 300px;
    min-height: 300px;
  }
  #reading-list .books {
    padding: 5rem 0;
  }
  #reading-list .books h2 {
    font-size: 2.5rem;
  }
  #reading-list .books .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}