#books-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;

  @media(max-width: 500px) {
    flex-direction: column;
  }

  & li {
    margin-right: 2vmax; margin-bottom: 5vmax; padding: 0;

    & a {
      display: flex; justify-content: center; align-items: center; flex-direction: column;
      border-bottom: 0 none;

      & h3 { margin-bottom: 1vmin; }

      & .thumbnail {
        position: relative; overflow: hidden;
        border: 2px solid #eaeaea; border-radius: 10px; 

        & img { display: block; }

        & .more {
          text-align: center; font-weight: bold;
        }

        @media(pointer: fine) {
          & .more {
            width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7);
            position: absolute; top: 0; left: 0;
            display: flex; align-items: center; justify-content: center;
            color: #fff; opacity: 0; transition: opacity 500ms;
          }

          &:hover .more {
            opacity: 1;
          }
        }
      }
    }
  }
}
