.tainacan-books-container {
    min-height: 50vh;
    padding: 30px 4.166666667%;
    -moz-perspective: 100px;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.tainacan-books-container .row { 
    justify-content: center;
    align-items: flex-end;
}
.tainacan-books-container .col { 
    display: flex; 
    justify-content: center;
    flex-basis: auto;
    margin-bottom: 70px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #555;
    box-shadow: 0px 15px 21px -23px #555, inset 0px -21px 21px -23px #fff;
    background-image: radial-gradient(8em 12em at bottom, rgba(140,140,140,0.8) 50%, transparent 90%);
}
.tainacan-books-container .col::before { 
    content: '';
    background-image: linear-gradient(0deg, rgba(223, 223, 223, 0.2), rgba(223, 223, 223, 0.6)), radial-gradient(10em 7em at bottom, rgba(140,140,140,0.8) 50%, transparent 90%);
    height: 34px;
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0 -22px 27px -11px #ddd;
}

/*
*  I'd recommend using Modernized to detect 3d transform support
*  then add a "supports-transform-3d" class 
*/

.tainacan-books-container .tainacan-book {
    position: relative;
    -moz-perspective: 100px;
    -webkit-perspective-origin-x: 100px;
    -webkit-perspective-origin-y: 100px;
    transform: rotateY(-3deg);
    -moz-transform: rotateY(-3deg);
    -webkit-transform: rotateY(-3deg);
    box-shadow: none;
    margin: 0;
    background-size: cover;
    background-blend-mode: multiply;
    border-radius: 4px 1px 1px 10px;
    transition: -moz-transform 0.2s, -webkit-transform 0.2s, transform 0.2s;
}
.tainacan-books-container .tainacan-book:hover {
    -moz-transform: rotateY(-10deg);
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
}
.tainacan-books-container .tainacan-book:hover:after {
    width: 4.0%;
}
.tainacan-books-container .tainacan-book:hover::before {
    left: 3.6%;
}
.tainacan-books-container .tainacan-book:hover .metadata-title {
    opacity: 1;
}

.tainacan-books-container .tainacan-book img {
    vertical-align: middle;
    width: 200px;
    height: auto;
    position: relative;
    max-width: 100%;
    opacity: 0;
}

.tainacan-books-container .tainacan-book:before,
.tainacan-books-container .tainacan-book:after {
    position: absolute;
    top: 2%;
    height: 96%;
    content: ' ';
    z-index: -1;
}

.tainacan-books-container .tainacan-book:before {
    width: 100%;
    left: 3.5%;
    transition: left 0.2s, box-shadow 0.2s;
}

.tainacan-books-container .tainacan-book:after {
    width: 3.5%;
    left: 100%;
    background-color: #EFEFEF;
    box-shadow: inset -1px 2px 2px #999, 5px 5px 7px -3px #333;
    border-right: 3px solid #222;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    border-radius: 2px;
    -moz-transform: rotateY(20deg);
    -webkit-transform: perspective(100) rotateY(20deg);
    transform: perspective(100) rotateY(20deg);
    transition: width 0.2s;
}

.tainacan-books-container .metadata-title {
    flex-shrink: 0;
    border-radius: 0px 0px 5px 5px;
    font-size: 0.875em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0.5em;
    text-align: center;
    position: absolute;
    opacity: 0;
    background-color: white;
    transition: opacity 0.5s;
    left: 0;
    right: 0;
    margin-top: 14px;
    z-index: -3;
    margin: 12px 10px 7px 10px;
    border: 1px solid #777;
}