.story_title {
	display: flex;
	align-items: center;
	gap: 16px;
}

.story_number {
	display: flex;
	width: 48px;
	height: 48px;
	padding: 12px 14px;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
	border: 3px solid var(--pale);
	border-radius: 50%;
	font-size: 36px;
}

.story_edit_link {
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	font-size: 16px;
}

audio {
	width: 100%;
	accent-color: var(--accent);
}

audio::-webkit-media-controls-play-button {
	color: var(--dark);
	background-color: var(--theme);
	border-radius: 50%;
	accent-color: var(--dark);
}
audio::-webkit-media-controls-panel {
	background-color: var(--off-white, #F2F3F0);
}

.story_pager{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.story_pager_link{
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.story_pager_number{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid var(--pale);
	background-color: var(--accent);
	color: var(--pale, #FFF);
	text-align: center;
	font-size: 24px;
	font-weight: 900;
}

.story_pager_link_active .story_pager_number{
	color: var(--grey);
	border-color: var(--grey);
	background-color: var(--dark);
}

.story_pager_link::after{
	content: '';
		width: 36px;
		height: 36px;
		background: url('/site/assets/images/benches/1.png') no-repeat center center;
		background-size: contain;
		filter: grayscale(0%);
		transition: var(--transition);
		transition-delay: 0.2s;
		pointer-events: auto;
	}

	.story_pager_link:hover::after{
		filter: grayscale(100%);
	}

	.story_pager_link_active::after{
		filter: grayscale(100%);
	}