.episode {
	color: $alt-text-color;
	height: 100%;

	.product-thumb {
		padding-top: 100% / $episode-ratio;

		.overlay {
			background-color: rgba($box-background-color,.7);
			background-image: none;

			.footer {
				display: flex;
				flex-grow: 1;

				.material-icons {
					font-size: 3rem;
				}
			}
		}
	}

	&:hover {
		.product-thumb {
			.overlay {
				opacity: .6;
			}

			&:hover {
				.overlay {
					opacity: 1;
				}
			}
		}
	}

	.header {
		flex-direction: column;
		margin: 1rem 0;

		.title {
			font-size: 1.25rem;
			margin: 0;
			color: $alt-headers-color;
		}

		.duration {
			font-size: 0.75rem;
			color: rgba($alt-text-color, .6);
		}
	}

	.body {
		.description {
			font-size: 1rem;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;

			p {
				margin: 0;
			}
		}
	}

	@media #{$medium-and-up} {
		.description {
			max-height: 2 * 1rem * 1.5;
			-webkit-line-clamp: 2;
		}
	}

	@media #{$large-and-up} {
		.description {
			max-height: 3 * 1rem * 1.5;
			-webkit-line-clamp: 3;
		}
	}

	@media #{$extra-large-and-up} {
		.description {
			max-height: 4 * 1rem * 1.5;
			-webkit-line-clamp: 4;
		}
	}
}