.card {
  max-width: 300px;       /* pick whatever size you want the card to be */
  margin: 16px auto;      /* or margin: 16px; if you don't want centering */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  overflow: hidden;       /* keeps image corners clean if you add border-radius */
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

img {
  width: 100%;
  height: auto;
  display: block;         /* removes weird inline-image gap under it */
  object-fit: cover;       /* prevents distortion if you also cap height */
}
.books-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.card {
  max-width: 300px;
  flex: 1 1 250px;   /* cards shrink/grow but won't go below 250px */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}