.tabs {
  display: flex;
  justify-content: center;
  gap: 1.3rem;
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .tabs {
    flex-direction: column;
    align-items: center;
    margin-bottom: 12rem;
  }
}
@media screen and (min-width: 768px) {
  .tabs {
    gap: 2rem;
  }
}
.tabs li a {
  display: inline-block;
  width: 28rem;
  padding: 1rem 2rem;
  color: #04255f;
  border: 1px solid #04255f;
  font-weight: bold;
}
.tabs li a.active {
  color: #fff;
  background-color: #04255f;
}
@media screen and (min-width: 768px) {
  .tabs li a {
    transition: 0.3s;
  }
  .tabs li a:hover {
    color: #fff;
    background-color: #04255f;
  }
}

.books-grid {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .books-grid {
    flex-direction: column;
    gap: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .books-grid {
    row-gap: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .books-grid .book {
    margin: 0 auto;
    width: 26rem;
  }
}
@media screen and (min-width: 768px) {
  .books-grid .book {
    width: 25%;
    padding: 2rem;
  }
}
.books-grid .book .thumb {
  margin-bottom: 2rem;
}
.books-grid .book .thumb .skeleton-img,
.books-grid .book .thumb img {
  display: block;
  width: auto;
  margin: 0 auto;
  height: 22rem;
  transition: 0.3s;
}
.books-grid .book .thumb .skeleton-img {
  width: 16rem;
}
@media screen and (min-width: 768px) {
  .books-grid .book .thumb a:hover img {
    transform: scale(1.05);
  }
}
.books-grid .book .book-detail .ttl {
  display: inline;
  font: inherit;
  color: inherit;
}
.books-grid .book .book-detail .ttl .skeleton-text {
  display: block;
  height: 1.5em;
}
.books-grid .book .book-detail .ttl a {
  color: inherit;
}
@media screen and (min-width: 768px) {
  .books-grid .book .book-detail .ttl a:hover {
    text-decoration: underline;
  }
}
.books-grid .book .book-detail .meta {
  display: inline;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
.books-grid .book .book-detail .meta::before {
  content: " / ";
}