.block-hero {
	position: relative;
	container-type: inline-size;
	isolation: isolate;
}

.block-hero,
div.block-hero.has-background {
	padding: 0;
}

.block-hero::before {
	background: url(../../assets/icons/logo/ribbon.svg) no-repeat center / contain;
	content: '';
	width: 48px;
	height: 72px;
	position: absolute;
	top: -8px;
	left: max(clamp(24px, 4.166667cqw, 60px), calc((100cqw - var(--wp--custom--layout--wide)) / 2));
	z-index: 2;
	pointer-events: none;
}

.block-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 67%);
	opacity: 0.6;
	z-index: 0;
	pointer-events: none;
}

.block-hero > img.block-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	pointer-events: none;
	z-index: -1;
}

.block-hero > div.block-hero__body {
	position: relative;
	z-index: 1;
	/* Scale with the block's width, capped at the 1440px design's minimum height. */
	min-height: min(650px, calc(100cqw * 650 / 1440));
	max-width: none;
	margin: 0;
	padding: 96px clamp(24px, 4.166667cqw, 60px) clamp(24px, 4.166667cqw, 60px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.block-hero__content {
	width: 100%;
	max-width: var(--wp--custom--layout--wide);
	margin-inline: auto;
}

.block-hero__content > * {
	max-width: calc(var(--wp--custom--layout--wide) * 2 / 3);
	margin-inline: 0;
}