.blog-home-hero {
	position: relative;
	color: var(--white);
	overflow: hidden;

	.slide,
	.slide-top,
	.img-cont {
		position: relative;
	}

	.content-section {
		position: absolute;
		inset: 50% 0 auto;
		translate: 0 -50%;
		z-index: 3;
		padding: var(--space-5);
		margin-top: var(--space-2);
		text-align: center;
		pointer-events: none;

		a,
		button {
			pointer-events: all;
		}
	}

	.slide-title {
		margin: 0;
		line-height: 1;
		text-shadow: 0 0 64px rgba(0, 0, 0, 0.45);
		color: inherit;
	}

	.title-small,
	.slide-title-text {
		display: block;
		line-height: 1;
	}

	.title-small {
		margin-bottom: 6px;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: 1.4375rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.slide-title-text {
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-style: italic;
		font-size: 4.75rem;
		text-transform: uppercase;
	}

	.img-cont::before {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: block;
		content: '';
		background:
			linear-gradient(180deg, rgba(13, 24, 39, 0.60), rgba(13, 24, 39, 0.00)),
			radial-gradient(ellipse at center bottom, rgba(13, 24, 39, 0.45) 0%, rgba(13, 24, 39, 0.00) 100%);
		pointer-events: none;
	}

	&.hide-content .img-cont::before {
		display: none;
	}

	.slide-img {
		width: 100%;
	}

	&:not(.hide-content) .shared-play-button {
		inset: auto var(--space-4) var(--space-4) auto;
		transform: none;
	}

	@media (min-width: 64em) {
		.content-section {
			margin-top: 36px;
		}

		.slide-title {
			text-shadow: 0 0 165px rgba(0, 0, 0, 0.45);
		}

		.title-small {
			font-size: 2rem;
		}

		.slide-title-text {
			font-size: 7rem;
		}
	}

	@media (min-width: 90em) {
		.title-small {
			margin-bottom: var(--space-4);
			font-size: 3.5rem;
		}

		.slide-title-text {
			font-size: 11.1875rem;
			letter-spacing: 0.04em;
		}
	}
}