Библиотека анимации

Question

У меня была небольшая тренировка с идеей для библиотечного проекта. Я хочу, чтобы «обложка книги» (зеленого цвета) расширялась за пределы .library__book (и, следовательно, grid) 300px вправо, как если бы ее вытащили с полки и повернули, чтобы показать крышку, это возможно? Я подумал, что flex-box может заставить оба div вписаться в один и тот же столбец сетки, и это вызывает проблему, поэтому я попытался float и inline-block, и оба позволили обложке div полностью раскрыться ширина, а не сидеть вправо, как я хочу, она сидела под позвоночником div. Если проблема заключается в том, что auto-fill из grid имеет фиксированные column-width с, могу ли я достичь того же эффекта, но с большей гибкостью, используя flex-wrap?

* {
	margin: 0;
}

.library {
	display: flex;
	justify-content: center;
	align-items: center;
}

.library__shelves {
	margin: 100px;
	display: grid;
	grid-row-gap: 50px;
	width: 80vw;
	grid-template-columns: repeat(auto-fill, 80px);
	grid-template-rows: repeat(auto-fill, 400px);
}

.library__book {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	grid-column: auto; 
	align-self: end;
	border-radius: 50% 50% 50% 50% / 1px;
	color: white;
	position: relative;
	z-index: 0;
}

.library__book--spine {
	height: calc(100% - 65px);
	width: 100%;
	padding-top: 25px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.library__book--spine-text {
	text-align: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.library__book--spine .title {
	font-weight: 500;
	font-size: 24px;
	line-height: 26px;
}

.library__book--spine.small .title {
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
}

.library__book--spine .author {
	font-size: 16px;
}

.library__book--spine.small .author {
	font-size: 12px;
	vertical-align: bottom;
}

.library__book--cover {
	grid-column: auto;
	height: 100%;
	width: 0;
	transform: rotateY(90deg);
	animation-name: cover;
	animation-duration: 2s;
	background-color: green;
}

.a {
	height: 350px;
	background-color: #D20002;
	font-family: 'EB Garamond', serif;
	animation-name: spine;
	animation-duration: 2s;
}

@keyframes spine {
	0% {z-index: 1;}
	50% {transform-origin: center; transform: scale(1.5); z-index: 1}
	100% {transform-origin: left center; transform: scale(1.5) rotateY(90deg); z-index: 1}
}

@keyframes cover {
	0% {z-index: 1; width: 300px;}
	50% {transform-origin: center; z-index: 1;}
	100% {transform-origin: left center; transform: rotateY(0deg); z-index: 1}
}

.b {
	height: 400px;
	background-color: #002BA0;
	font-family: "Roboto", sans-serif;
}

	<div class="library">
		<div class="library__shelves">
			<div class="library__book a">
				<div class="library__book--spine">
					<p class="library__book--spine-text"><span class="title">The Lord of the Rings</span><br>
						<span class="author">J.R.R. Tolkein</span></p>
				</div>
				<div class="library__book--cover">
					<p class="library__book--title"></p>
					<p class="library__book--author"></p>
					<p class="library__book--page-count"></p>
					<p class="library__book--read"></p>
					<p class="library__book--rating"></p>
				</div>
			</div>
			<div class="library__book b">
				<div class="library__book--spine small">
					<p class="library__book--spine-text"><span class="title">Zen and the Art of Motorcycle Maintenance: An Inquiry into Values</span><br>
						<span class="author">Robert M. Pirsig</span></p>
				</div>
				<div class="library__book--cove">
					<p class="library__book--title"></p>
					<p class="library__book--author"></p>
					<p class="library__book--page-count"></p>
					<p class="library__book--read"></p>
					<p class="library__book--rating"></p>
				</div>
			</div>
		</div>
	</div>