.view-book__inner {
   display: flex;
   max-width: 800px;
   background-color: white;
   margin: auto;   
}
.view-book__col-1 {
   width: 233px;
   text-align: center;
   margin-right: 20px;
   padding: 10px;
   background-color: white;
   
}
.view-book__col-2 {
   padding-left: 10px;
   padding-bottom: 10px;
   padding-right: 10px;
}
.view-book__img {
   margin-bottom: 10px;   
   width: 213px;   
}
.view-book__img img {
    border: 1px solid #ccc;
    width: 100%;
}
.view-book__btn {   
   display: inline-block;
   padding: 10px 20px;
   background-color: var(--blue);   
   border-radius: 3px;
}
.view-book__btn a {   
   color: white;
}
.view-book__date-views {
   display: inline-flex;   
   align-items: center;
   padding: 10px 0;
}
.view-book__date-views span {
   color: #585858;
   padding-left: 10px;
   padding-right: 10px;
}
.view-book__date-views img {
   opacity: .6
}
.view-book__specification {
   display: flex;
   margin: 5px 0;
}
.view-book__legend {
   font-weight: bold;
   margin-right: 10px;  
}
.view-book__legend:after {
   content: ':'         
}
.view-book__name {
   margin-bottom: 10px;   
}
.view-book__name h2 {
   margin: 0;   
}
.view-book__record-header {
   font-size: 20px;
   font-weight: bold;
   margin-top: 20px;
   margin-bottom: 5px;
}

@media(max-width: 700px) {
   .view-book__specification {
      flex-direction: column;
   }   
}
@media(max-width: 600px) {
   .view-book__inner {
      flex-direction: column;
   }
   .view-book__col-1 {
      margin: auto;
   }
   .view-book__name {
      text-align: center;
   }
   .view-book__date-views {
      display: flex;
      justify-content: center;      
   }
   .view-book__specification {
      flex-direction: unset;
   }   
}