/* Small phones and up */
@media (max-width: 768px) {
  /* tweaks for small devices */

  .mainbox {
    margin: 5%;
  }

  .booksbox {
    display: flex;
    flex-direction: column;
  }

  #booksboximage img {
    object-fit: cover;
    width: 100%;
    height: 750px;
    object-position: center;
    padding: 0;
  }
}

/* Tablets portrait and up */
@media (min-width: 768px) {
  /* layout, spacing, type adjustments */
  .mainbox {
    margin: 5% 10%;
  }
}

/*Desktop screens and up.*/
@media (min-width: 1024px) {
  /* max-widths, generous spacing */
  .mainbox {
    margin: 5% 25%;
  }
}