@use 'vars' as *

.bookList
  width: 100%
  max-width: 150rem
  margin: 0 auto
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr))
  gap: 4rem
  justify-items: center
  padding: 2rem

  @include mobile
    padding: 0
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr))
    gap: 2rem

    .author
      font-size: 1.3rem
      overflow: hidden
      display: -webkit-box
      -webkit-box-orient: vertical
      -webkit-line-clamp: 2

    .count, .favCount
      font-size: 1.3rem

.book
  transform: scale(0.95)
  transition: transform .2s

  &:hover
    transform: scale(0.99)

    a
      text-decoration: none

      &:after
        transform: none

  a
    transition: all .2s
    text-decoration: none
    display: flex
    flex-direction: column
    width: 20rem
    height: 30rem
    border: 1px solid $fg
    padding: 2rem
    align-items: center
    justify-content: center
    text-align: center
    position: relative

    @include mobile
      width: 14rem
      height: 21rem

    &:after
      transition: transform .2s
      content: ''
      border: 1px solid $mid2
      width: 100%
      height: 100%
      position: absolute
      z-index: -1
      pointer-events: none
      transform: translateX(.8rem) translateY(.8rem)

  .title
    margin-bottom: 2rem
    font-size: 2rem
    overflow: hidden
    display: -webkit-box
    -webkit-box-orient: vertical
    -webkit-line-clamp: 4
    padding: 0 0.4rem

    @include mobile
      font-size: 1.8rem

  .count, .ratingNum, .favCount
    position: absolute

  .count
    bottom: 1rem
    right: 1rem

  .ratingNum, .favCount
    top: 1rem
    right: 1rem

.authorInfo
  max-width: $maxWidth
  margin: 0 auto
  margin-bottom: 2rem

  + .modeHeading
    margin: 2rem 0

.favCount
  display: flex
  align-items: center
