.video-gallery {
	gap: 3rem 1rem;
	h2 {
		margin: 0;
	}
	.video-item {
		flex: 1 1 100%;
		gap: 0.5rem;
		border: 1px solid #ddd;
		animation: opacity 1s ease-in-out;
		.responsive-media {
			border-bottom: 1px solid #ddd;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				animation: skeleton-loading 4s ease-in-out;
				z-index: 9;
				pointer-events: none;
			}
		}
		.episode {
			font-family: var(--font__sans-serif);
			font-size: calc(var(--font-size__base) - 2px);
			font-weight: 500;
		}
		.title,
		.episode {
			padding: 0 1rem;
		}
		.title {
			padding-bottom: 1rem;
		}
	}
}

@media screen and (min-width: 600px) {
	.video-gallery {
		gap: 3rem 2rem;
		.video-item {
			flex: 0 1 calc(50% - 1rem);
		}
	}
}
@media screen and (min-width: 900px) {
	.video-gallery {
		gap: 3rem;
		.video-item {
			flex: 0 1 calc(33.333% - 2rem);
		}
	}
}