/*==============================================
Recent Releases
===============================================*/

.book-cover {
	flex-basis: 75px;
	width: 75px;
	margin: 0 auto;
	display: block;
	flex-shrink: 0;
	
	img {
		width: 100%;
		display: block;
		height: auto;
		transition: opacity .3s;
	}
	&:hover {
		img {
			opacity: 0.7;
		}
	}

	@media screen and (min-width: $bp-small) {
		   flex-basis: 100px;
		   width: 100px;
	}

	@media screen and (min-width: 640px) {
		   flex-basis: 165px;
		   width: 165px;
	}

}
.book-details {
	position: relative;
	padding: 0 20px;
	flex-grow: 1;
	font-size: 80%;
	flex-shrink: 1;
	max-width: 100%;

	p {
		display: none;
	}
	
	@media screen and (min-width: $bp-small) {
		   text-align: left;
		   padding: 0 35px 0;
		   font-size: 100%;
	}

	@media screen and (min-width: 640px) {
	    p {
	    	display: block;
	    }
	}
}

/*==============================================
Bestsellers
===============================================*/

.bestseller-grid {
	margin-top: 20px;
	@media screen and (min-width: $bp-tablet) {
		margin-top: 0;
	}
}
.bestseller {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 157.4%;
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	&:before {
		@extend %pseudos;
		display: none;
	}

	
	@media screen and (min-width: $bp-tablet) {
		&:before {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: $color-accent;
			z-index: 2;
			opacity: 0;
			transition: opacity .4s;
			display: block;
		}
		&:hover {
			&:before {
				opacity: 0.8;
			}
			.bestseller-link {
				opacity: 1;
			}
		}
	}
}
.bestseller-link {
	display: none;

	@media screen and (min-width: $bp-tablet) {
		position: absolute;
		top: 4px;
		left: 4px;
		right: 4px;
		bottom: 4px;
		border: solid 1px white;
		margin: auto;
		color: white;
		text-transform: uppercase;
		font-size: $font-micro;
		opacity: 0;
		transition: opacity .4s;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		&:before {
			display: block;
			content: '+';
			font-size: 64px;
			color: #fff;
			width: 100%;
			text-align: center;
			font-weight: 100;
			font-family: sans-serif;
			margin-bottom: 10px;
		}
	}
}