.custom-blog-hero {
	position: relative;
	container-type: inline-size;
	margin-bottom: var(--space-8);
	text-align: center;
	color: var(--white);

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

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.content-section,
	.slide-top {
		grid-area: 1 / 1 / 1 / 1;
	}

	.content-section {
		z-index: 4;
		align-self: center;
		padding: 30px;
		pointer-events: none;

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

	.icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		aspect-ratio: 1;
		margin: 0 auto var(--space-5);
		font-size: var(--text-4xl);
		line-height: var(--leading-none);
		color: var(--white);
		background: var(--green);
		border-radius: var(--rounded-circle);
	}

	.info-flag {
		display: block;
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-lg);
	}

	.slide-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-extrabold);
		font-size: var(--text-3xl);
		line-height: 1.2;
		text-shadow: 0 0 10px var(--black);
		color: inherit;
	}

	.img-cont,
	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.img-cont::before {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: block;
		content: '';
		background: rgba(0, 0, 0, 0.3);
		pointer-events: none;
	}

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

	@container (min-width: 64em) {
		.info-flag {
			font-size: var(--text-2xl);
		}

		.slide-title {
			font-size: var(--text-6xl);
		}
	}
}