.book {
    width: 226px;
    height: 346px;
    display: inline-block;
    margin: 0 2px 20px;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    vertical-align: top;
    transition: all ease-in-out 0.2s;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    text-align: center;
}
@media screen and (max-width: 600px) {
    .book {
        width: 42vw;
        height: calc(1.53 * 42vw);
    }
}
.book .meta {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 80%,
        rgba(2, 0, 36, 0) 100%
    );
    color: #ffffff;
    text-shadow: black 1px 1px;
}
.book .meta .title {
    display: block;
    font-size: 1em;
    color: #ffffff;
    margin: 0.3em;
}
.book .meta .author {
    font-size: 0.9em;
}
.book .effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.05) 0.75%,
        rgba(255, 255, 255, 0.5) 1%,
        rgba(255, 255, 255, 0.6) 1.3%,
        rgba(255, 255, 255, 0.5) 1.4%,
        rgba(255, 255, 255, 0.3) 1.5%,
        rgba(255, 255, 255, 0.3) 2.4%,
        rgba(0, 0, 0, 0.05) 2.7%,
        rgba(0, 0, 0, 0.05) 3.5%,
        rgba(255, 255, 255, 0.3) 4%,
        rgba(255, 255, 255, 0.3) 4.5%,
        rgba(244, 244, 244, 0.1) 5.4%,
        rgba(244, 244, 244, 0.1) 99%,
        rgba(144, 144, 144, 0.2) 100%
    );
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.12);
}
.book .cover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}
.book .cover img {
    min-width: 100%;
    min-height: 100%;
}
