.homePage {
	padding: 0 2rem;
	padding-bottom: 8rem;

	h2 {
		margin-top: 3rem;
		margin-bottom: 1.5rem;
	}

	.latestEpisodes {
		ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			li {
				background: var(--white);
				border: 1px solid var(--gray-100);
				padding: 1.25rem;
				border-radius: 1.5rem;
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				img {
					width: 6rem;
					height: 6rem;
					border-radius: 1rem;
					// object-fit: cover;
				}

				.episodeDetails {
					flex: 1;
					margin-left: 1rem;
					max-width: calc(100% - 6rem - 1rem);

					a {
						display: block;
						color: var(--gray-800);
						font-family: Lexend, sans-serif;
						font-size: 1.1rem;
						font-weight: 600;
						text-decoration: none;
						line-height: 1.4rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 0.8rem;

						&:hover {
							text-decoration: underline;
						}
					}

					a.light {
						color: var(--gray-50);
					}

					p {
						font-size: 0.875rem;
						margin-top: 0.5rem;
						max-width: 70%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					span {
						display: inline-block;
						margin-top: 0.5rem;
						font-size: 0.875rem;

						&:last-child {
							margin-left: 0.5rem;
							padding-left: 0.5rem;
							position: relative;

							&::before {
								content: '';
								width: 4px;
								height: 4px;
								border-radius: 2px;
								background: #ddd;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}

				button {
					border: 0;
					position: absolute;
					right: 1.25rem;
					bottom: 1.25rem;
					width: 2.5rem;
					height: 2.5rem;
					background: var(--white);
					border: 1px solid var(--gray-100);
					border-radius: 0.675rem;
					font-size: 0;

					transition: filter 0.2s ease-in-out;

					img {
						width: 1.25rem;
						height: 1.25rem;
						position: relative;
					}

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

				.btnGreen {
					background: var(--green-500);
					border: none;
				}
			}
		}
	}

	.allEpisodes {
		ul {
			list-style: none;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 1.5rem;

			li {
				background: var(--white);
				border: 1px solid var(--gray-100);
				padding: 1.25rem;
				border-radius: 1.5rem;
				position: relative;
				display: flex;
				// flex-direction: column;
				align-items: center;

				.thumbnail {
					// width: 100%;
					// height: 100%;

					img {
						width: 6rem;
						height: 6rem;
						border-radius: 1rem;
						object-fit: contain;
					}
				}

				.episodeDetails {
					flex: 1;
					margin-left: 1rem;
					max-width: calc(100% - 6rem - 1rem);

					a {
						display: block;
						color: var(--gray-800);
						font-family: Lexend, sans-serif;
						font-weight: 600;
						font-size: 1.1rem;
						text-decoration: none;
						line-height: 1.4rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 0.8rem;

						&:hover {
							text-decoration: underline;
						}
					}

					a.light {
						color: var(--gray-50);
					}

					p {
						font-size: 0.875rem;
						margin-top: 0.5rem;
						max-width: 70%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					span {
						display: inline-block;
						margin-top: 0.5rem;
						font-size: 0.875rem;

						&:last-child {
							margin-left: 0.5rem;
							padding-left: 0.5rem;
							position: relative;

							&::before {
								content: '';
								width: 4px;
								height: 4px;
								border-radius: 2px;
								background: #ddd;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}

				button {
					border: 0;
					position: absolute;
					right: 1.25rem;
					bottom: 1.25rem;
					width: 2.5rem;
					height: 2.5rem;
					background: var(--white);
					border: 1px solid var(--gray-100);
					border-radius: 0.675rem;
					font-size: 0;

					transition: filter 0.2s ease-in-out;

					img {
						width: 1.25rem;
						height: 1.25rem;
						position: relative;
					}

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

				.btnGreen {
					background: var(--green-500);
					border: none;
				}
			}
		}
	}

	.allEpisodes {
		padding-bottom: 2rem;

		table {
			width: 100%;

			th,
			td {
				padding: 0.75rem 1rem;
				// border-bottom: 1px solid var(--gray-200);
			}

			th {
				color: var(--gray-200);
				text-transform: uppercase;
				font: 600 0.75rem Lexend, sans-serif;
				text-align: left;
			}

			td {
				font-size: 0.875rem;

				img.thumbNail {
					width: 2.5rem;
					width: 2.5rem;
					min-width: 3.5rem;
					border-radius: 0.5rem;
				}

				a {
					color: var(--gray-800);
					font-family: Lexend, sans-serif;
					font-weight: 600;
					text-decoration: none;
					line-height: 1.4rem;
					font-size: 1rem;

					&:hover {
						text-decoration: underline;
					}
				}

				a.light {
					color: var(--gray-50);
				}

				button {
					width: 2.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 2.5rem;
					background: var(--white);
					border: 1px solid var(--gray-100);
					border-radius: 0.5rem;
					font-size: 0;

					transition: filter 0.2s ease-in-out;

					img {
						width: 1.25rem;
						height: 1.25rem;
					}

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

				.btnGreen {
					background: var(--green-500);
					border: none;
				}
			}
		}

		ul.listAll {
			list-style: none;
			display: grid;
			gap: 1.5rem;

			li {
				background: var(--white);
				border: 1px solid var(--gray-100);
				padding: 1.25rem;
				border-radius: 1.5rem;
				position: relative;
				display: flex;
				align-items: center;

				img {
					width: 6rem;
					height: 6rem;
					border-radius: 1rem;
					// object-fit: cover;
				}

				.episodeDetails {
					flex: 1;
					margin-left: 1rem;

					a {
						display: block;
						color: var(--gray-800);
						font-family: Lexend, sans-serif;
						font-weight: 600;
						text-decoration: none;
						line-height: 1.4rem;

						&:hover {
							text-decoration: underline;
						}
					}

					a.light {
						color: var(--gray-50);
					}

					p {
						font-size: 0.875rem;
						margin-top: 0.5rem;
						max-width: 70%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					span {
						display: inline-block;
						margin-top: 0.5rem;
						font-size: 0.875rem;

						&:last-child {
							margin-left: 0.5rem;
							padding-left: 0.5rem;
							position: relative;

							&::before {
								content: '';
								width: 4px;
								height: 4px;
								border-radius: 2px;
								background: #ddd;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}

				button {
					border: 0;
					position: absolute;
					right: 1.25rem;
					bottom: 1.25rem;
					width: 2.5rem;
					height: 2.5rem;
					background: var(--white);
					border: 1px solid var(--gray-100);
					border-radius: 0.675rem;
					font-size: 0;

					transition: filter 0.2s ease-in-out;

					img {
						width: 1.25rem;
						height: 1.25rem;
						position: relative;
					}

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

				.btnGreen {
					background: var(--green-500);
					border: none;
				}
			}
		}
	}
}

@media screen and (max-width: 1700px) {
	.homePage {
		.latestEpisodes {
			ul {
				grid-template-columns: 1fr;
			}
		}
	}
}

@media (max-width: 600px) {
	.latestEpisodes,
	.allEpisodes {
		ul {
			grid-template-columns: repeat(2, minmax(225px, 1fr));
		}
	}
}
