div.book-list
{
list-style-type: none;
margin-left: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
adiv.itemgn-items: stretch;
}

div.book-list div.item
{
width: 48.5%;
margin-top: 3%;
box-shadow: 0.125rem 0.125rem 0.75rem rgba(0, 0, 0, 0.25);
position: relative;
outline: solid 1px #eee;
}

div.book-list div.item:before
{
content: '\20';
display: block;
padding-top: 35%;
}

div.book-list div.item div.thumb
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
width: 25%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
outline: solid 1px #eee;
/*outline: solid 1px red;*/
}

div.book-list div.item div.thumb:before
{
content: '\20';
display: block;
padding-top: 150%;
}

div.book-list div.item div.slider
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
width: 25%;
outline: solid 1px #eee;
z-index: 0;
/*outline: solid 1px red;*/
}

div.book-list div.item div.slider:before
{
content: '\20';
display: block;
padding-top: 150%;
}

div.book-list div.item div.slider div.container
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 0;
/*outline: solid 1px red;*/
}

div.book-list div.item div.slider div.container div.slide
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}

div.book-list div.item div.slider div.container div.slide:nth-of-type(1)
{
z-index: 200;
}

div.book-list div.item div.slider div.container div.slide:nth-of-type(2)
{
z-index: 100;
}

div.book-list div.item div.slider div.control
{
position: absolute;
top: 0;
bottom: 0;
width: 15%;
background-size: contain;
background-position: center 1rem;
background-repeat: no-repeat;
cursor: pointer;
z-index: 1000;
opacity: 0.25;
transition: all ease 0.15s;
/*outline: solid 1px red;*/
}

div.book-list div.item div.slider:hover div.control
{
opacity: 1;
}

div.book-list div.item div.slider div.control.previous
{
left: 0.25rem;
background-image: url('/assets/corner-left.svg');
}

div.book-list div.item div.slider div.control.next
{
right: 0.25rem;
background-image: url('/assets/corner-right.svg');
}

div.book-list div.item div.slider div.mark-list
{
position: absolute;
left: 0;
right: 0;
bottom: 0.75rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 1000;
/*outline: solid 1px red;*/
}

div.book-list div.item div.slider div.mark-list div.mark
{
width: 0.5rem;
height: 0.5rem;
border: solid 1px #08aea1;
border-radius: 50%;
margin: 0 0.25rem;
background: transparent;
transition: all ease 0.15s;
}

div.book-list div.item div.slider div.mark-list div.mark.current
{
background: #08aea1;
}

div.book-list div.item div.text
{
position: absolute;
top: 0;
left: 28.5%;
bottom: 0;
right: 0;
/*outline: solid 1px red;*/
}

div.book-list div.item div.text h3
{
font-size: 1.125rem;
text-transform: none;
margin-top: 0.5rem;
padding-right: 1rem;
font-weight: 400;
}

div.book-list div.item div.text a.more
{
position: absolute;
bottom: 1rem;
left: 0;
color: #08aea1;
}

@media (max-width: 800px)
{
div.book-list div.item { width: 100%; margin-top: 2rem; }
div.book-list div.item:before { padding-top: 55%; }
div.book-list div.item div.thumb { width: 40%; }
div.book-list div.item div.slider { width: 40%; }
div.book-list div.item div.text { left: 45%; overflow: hidden; }
div.book-list div.item div.text p.small { line-height: 1rem !important; margin-top: 0.5rem; }
}