/* RMIT University Vietnam
  Course: COSC2430 Web Programming
  Semester: 2023A
  Assessment: Assignment 1
  Author: Do Le Long An
  ID: s3963207
  Acknowledgement: 
  MDN Web Docs, RMIT Canvas (HTML, CSS learning materials)
  shapedivider.app (For wavy divider svg), 
  sketchfab.com (For the 3D background)
  unplash.com (For quality images)
  flaticon.com, fontawesome.com (For icons and fonts)
  dribble.com, canva.com, Codepen.com (For design idea inspiration) */

.container {
  position: relative;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 0 1rem 4rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* transform: translateX(50px); */
  color: #F5F5F5;
  z-index: 3;
}

.grid-3 {
    display: grid;
    grid-gap: 100px;
    grid-template-columns: repeat(3, 1fr);
}

.center {
    text-align: center;
    margin: auto;
}

/* Change book background image */
.book--1 .book__img, .book--1 .book__img--hover {
  background-image: url('../../.././assets/influence-ppl.png');
}

.book--2 .book__img, .book--2 .book__img--hover {
  background-image: url('../../.././assets/myth-normal.png');
}

.book--3 .book__img, .book--3 .book__img--hover {
  background-image: url('../../.././assets/harry-potter/harry-potter-7_2.jpeg');
}

.book--4 .book__img, .book--4 .book__img--hover {
  background-image: url('../../.././assets/harry-potter/harry-potter-1.jpeg');
}

.book--5 .book__img, .book--5 .book__img--hover {
  background-image: url('../../.././assets/littleprince.jpeg');
}

.book--6 .book__img, .book--6 .book__img--hover {
  background-image: url('../../.././assets/harry-potter/harry-potter-4.jpeg');
}

.book--7 .book__img, .book--7 .book__img--hover {
  background-image: url('../../.././assets/not-give-a-fk.jpeg');
}

.book--8 .book__img, .book--8 .book__img--hover {
  background-image: url('../../.././assets/');
}

.book--9 .book__img, .book--9 .book__img--hover {
  background-image: url('../../.././assets/');
}

.book__img {
visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 250px;
}

.book__info-hover {
  position: absolute;
  padding: 16px;
width: 100%;
opacity: 0;
top: 0;
}

.book__img--hover {
transition: 0.2s all ease-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
position: absolute;
  height: 235px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
top: 0;
}

.book {
transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  width: 100%;
position: relative;
border-radius: 12px;
overflow: hidden;
}

.book:hover, .book__info:hover {
  transform: scale(1, 1);
  background-color: #fff;
}

.book__info:hover {
  transform: scale(1.1, 1.1);
}

.book__info {
z-index: 2;
/* background-color: #fff; */
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px 24px 24px 24px;
background-color: black;
}

.book__category {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
color: #F5F5F5;
}

.book__title {
  margin-top: 5px;
  margin-bottom: 10px;
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
}

.book__by {
  font-size: 12px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.book__author {
  font-weight: 600;
  text-decoration: none;
  color: #F5F5F5;
}

.book:hover .book__img--hover {
  height: 100%;
  opacity: 0.3;
}

.book:hover .book__info,
.book:hover .book__author,
.book:hover .book__category {
  background-color: transparent;
  color: black;
  position: relative;
}

.book:hover .book__info-hover {
  opacity: 1;
}

@media (max-width: 780px) {

  .container {
    display: block;
    transform: translateX(-1px);
  }

  .grid-3 {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .book {
    width: 75%;
  }

  .book-section div {
    padding: 1.2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .book__info, .book__info-hover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}