.track {
	margin-bottom: $track-padding-small * .85;

	&-header {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 $track-padding-small;
	}

	&-title {
		font-size: 1.3rem;
		margin: 0 0 .75rem;
	}

	&-more {
		position: relative;
		font-size: .85rem;
		margin: 0 0 .5rem  1rem;
		opacity: 0;
		transform: translateX(-1rem);
		transition: color 300ms, transform 300ms ease-in-out, opacity 300ms;
		z-index: 1;
	}

	&.hovered {
		z-index: 500;
	}

	&:hover {
		.more {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.container + &,
	.episodes + & {
		margin-top: $track-padding-small;
	}

	@media #{$medium-and-up} {
		margin-bottom: $track-padding-medium * .85;

		&-header {
			padding: 0 $track-padding-medium;
		}

		.container + &,
		.episodes + & {
			margin-top: $track-padding-medium;
		}
	}

	@media #{$large-and-up} {
		margin-bottom: $track-padding-large * .85;

		&-header {
			padding: 0 $track-padding-large;
		}

		.container + &,
		.episodes + & {
			margin-top: $track-padding-large;
		}
	}
}