.soundtracks
	horizontal-wrap
	justify-content space-around

.soundtrack
	vertical
	flex 1
	flex-basis 500px
	padding 1rem

.soundtrack-content
	horizontal
	border-radius 3px
	overflow hidden
	box-shadow shadow-light

	iframe
		width 100%

.soundtrack-image
	object-fit cover
	width 100%
	height 200px
	filter brightness(100%)
	transition filter 250ms ease

.soundtrack-play-button
	position absolute
	top 50%
	left 50%
	transform translate(-50%, -50%)
	border-radius 50%
	width 92px
	height 92px
	font-size 3rem
	color rgba(0, 0, 0, 0.15)
	background rgba(255, 255, 255, 0.9)
	pointer-events none

	.icon-play
		transform translateX(27%)

.soundtrack-visualizer
	horizontal
	justify-content center
	align-items center
	pointer-events none
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	opacity 0
	transition opacity 250ms ease

.visualizer-box
	width 3px
	height 15px
	margin 0.2rem
	border-radius 1px
	transition all 250ms linear
	animation scale-vertically 300ms infinite ease, change-color 1s infinite ease
	animation-direction alternate

.visualizer-box-1
	animation-delay 0

.visualizer-box-2
	animation-delay 100ms

.visualizer-box-3
	animation-delay 200ms

animation scale-vertically
	0%
		transform scaleY(0.3)
		opacity 0.8
	100%
		transform scaleY(1)
		opacity 1

animation change-color
	0%
		background-color hsl(45, 100%, 68%)
	100%
		background-color hsl(235, 100%, 68%)

.soundtrack-play-area
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	cursor pointer
	transition opacity 250ms ease

	&.playing
		.soundtrack-play-button
			opacity 0

		.soundtrack-visualizer
			opacity 1

		.soundtrack-image
			filter brightness(0)

	:hover
		.soundtrack-play-button
			color button-hover-color
			background button-hover-background

.soundtrack-footer
	text-align center
	margin-bottom 1rem
	margin-top 0.4rem
	font-size 0.9em

	span
		opacity 0.65

.soundtrack-anime-link
	display none

> 800px
	.soundtrack-anime-link
		display block

.soundtrack-anime-image
	width 142px
	height 200px