* {
  box-sizing: border-box;
}

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction
     and if we allow the items to wrap
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;

  padding: 0;
  margin: 0;
  list-style: none;
}


/*.flex-item {*/
/*    background-color: #EFEFF5;*/
/*  border: 3px solid tomato;*/
/*  !*padding: 5px;*!*/
/*  width: 300px;*/
/*  height: 400px;*/
/*  margin-top: 10px;*/
/*  !*line-height: 150px;*!*/
/*  color: tomato;*/
/*  font-weight: bold;*/
/*  !*font-size: 1em;*!*/
/*  !*text-align: center;*!*/
/*    !* your existing flex styles here *!*/
/*    display: flex;*/
/*    align-items: center;        !* helps with vertical centering of the whole card *!*/
/*    justify-content: center;*/
/*}*/

/*.book-table {*/
/*    width: 100%;*/
/*    max-width: 260px;           !* optional: prevents it from stretching too wide *!*/
/*    height: 100%;               !* makes table fill the li height *!*/
/*    border-collapse: collapse;*/
/*    text-align: center;*/
/*    margin: 0 auto;             !* centers the whole table inside li *!*/
/*}*/

/*.book-table td {*/
/*    !*padding: 10px 12px;*!*/
/*    vertical-align: middle;     !* vertical centering inside each cell *!*/
/*}*/

/*.book-title {*/
/*    font-weight: bold;*/
/*    font-size: 1.1em;*/
/*}*/

/*.book-cover {*/
/*    text-align: center;         !* horizontal centering *!*/
/*    height: 220px;              !* adjust this value to control image area height *!*/
/*    display: flex;*/
/*    align-items: center;        !* extra vertical centering safety *!*/
/*    justify-content: center;*/
/*}*/

/*.book-image {*/
/*    max-height: 80%;           !* fills the book-cover area nicely *!*/
/*    max-width: 80%;*/
/*    width: auto;*/
/*    height: auto;*/
/*    object-fit: contain;        !* keeps proportions, no stretching *!*/
/*    border-radius: 6px;*/
/*    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*}*/

/*.book-authors {*/
/*    font-style: italic;*/
/*    color: #555;*/
/*    font-size: 0.95em;*/
/*}*/

.flex-item {
    background-color: #EFEFF5;           /* fallback if image fails to load */
    background-size: cover;              /* image fills the whole li */
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid tomato;
    width: 300px;
    height: 400px;
    margin-top: 10px;
    color: #fff;                         /* white text for visibility */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;                  /* needed for the overlay */
    overflow: hidden;                    /* keeps everything inside on hover */
    /*cursor: pointer;*/
    transition: transform 0.3s ease;     /* optional nice hover lift */
}

.flex-item:hover {
    transform: scale(1.03);              /* subtle zoom on hover */
}

/* subtle dark overlay — hidden by default, appears on hover */
.flex-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.flex-item:hover::before {
    opacity: 1;
}

.book-table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;     /* title at top, authors at bottom */
    text-align: center;
    padding: 25px 20px;
    box-sizing: border-box;
    position: relative;                 /* sits above the overlay */
    z-index: 1;
    opacity: 0;                         /* HIDDEN by default */
    transition: opacity 0.3s ease-in-out;
}

.flex-item:hover .book-table {
    opacity: 1;                         /* shown on hover */
}

.book-title {
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.book-authors {
    font-style: italic;
    color: #eee;
    font-size: 0.95em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}