.books-intro, .books-list {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto; }

.books-intro, .books-list {
  padding-left: 60px;
  padding-right: 60px; }
  @media all and (max-width: 768px) {
    .books-intro, .books-list {
      padding-left: 40px;
      padding-right: 40px; } }
  @media all and (max-width: 450px) {
    .books-intro, .books-list {
      padding-left: 20px;
      padding-right: 20px; } }

.books-intro, .books-list {
  padding-top: 60px;
  padding-bottom: 60px; }
  @media all and (max-width: 768px) {
    .books-intro, .books-list {
      padding-top: 40px;
      padding-bottom: 40px; } }
  @media all and (max-width: 450px) {
    .books-intro, .books-list {
      padding-top: 20px;
      padding-bottom: 20px; } }

.books-list ul .book-images .book-cover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }

.books-intro {
  padding-bottom: 0; }

.books-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .books-list ul li {
    width: calc(50% - 20px);
    margin-bottom: 20px; }
    .books-list ul li a {
      text-decoration: none;
      display: block;
      width: 100%; }
      .books-list ul li a.is-hover {
        color: #999; }
        .books-list ul li a.is-hover .book-cover.real_cover {
          opacity: 1; }
    .books-list ul li h1 {
      display: none; }
  .books-list ul .book-images {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    margin-bottom: 10px; }
    .books-list ul .book-images .book-cover {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: opacity 0.2s linear;
      opacity: 1; }
      .books-list ul .book-images .book-cover.real_cover {
        opacity: 0; }