.bookCard {
  width: 300px;
  border: 1px lightgray solid;
  overflow: hidden;
  display: flex;
  justify-content: stretch;
  flex-direction: column;
}

.bookCard:hover .imageContainer {
  max-height: 100%;
}

.cardHeading {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  justify-content: center;
  padding: 10px;
  transition: height 0.3s;
}

.cardHeading > * {
  width: 100%;
}

.imageContainer {
  max-height: 0%;
  transition: max-height 0.3s;
  overflow: hidden;
  display: flex;
}

.image {
  width: 100%;
  max-height: 100%;
  align-self: flex-end;
  object-fit: cover;
  object-position: top;
}