.container {
	height: calc(100vh - 6.5rem);
	overflow-y: scroll;
	padding: 2rem;

	.episode {
		max-width: 45rem;
		padding: 3rem 2rem 8rem 2rem;
		margin: 0 auto;

		.thumbnailContainer {
			position: relative;

			img {
				border-radius: 1rem;
			}

			button {
				width: 3rem;
				height: 3rem;
				border-radius: 0.75rem;
				border: 0;
				position: absolute;
				z-index: 5;
				font-size: 0;

				transition: filter 0.2s ease-in-out;

				&:first-child {
					left: 0;
					top: 50%;
					background: var(--purple-500);
					transform: translate(-50%, -50%);
				}

				&:last-child {
					right: 0;
					top: 50%;
					background: var(--green-500);
					transform: translate(50%, -50%);
				}

				&:hover {
					filter: brightness(0.95);
				}
			}
		}

		header {
			padding-bottom: 1rem;
			border-bottom: 1px solid var(--gray-100);
			transition: all 0.1s ease-in-out;

			h1 {
				margin-top: 1.8rem;
				margin-bottom: 1.5rem;
			}

			span {
				display: inline-block;
				font-size: 1rem;
				line-height: 1.675rem;
				align-self: center;
			}

			.row {
				display: flex;
				margin-bottom: 0.8rem;

				.icon {
					color: var(--purple-800);
					width: 25px;
					min-width: 25px;
					margin-right: 0.8rem;
				}
			}
		}

		.description {
			margin-top: 2rem;
			line-height: 1.675rem;
			color: var(--gray-800);

			p {
				margin: 1.5rem 0;
				font-size: 1.16rem;
			}
		}
	}
}

@media (max-width: 720px) {
	.episode {
		header {
			h1 {
				font-size: clamp(1.4rem, 1.5vw, 1.6rem);
			}
		}
	}
}
