.dur-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

.dur-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.dur-hero .dur-hero__media .dur-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Fade the photo into the page color at the bottom. */
.dur-hero-fade-yes .dur-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: -1;
	height: var(--dur-fade-height, 30%);
	background: linear-gradient(
		to top,
		var(--dur-fade-color, transparent),
		color-mix(in srgb, var(--dur-fade-color, transparent) 0%, transparent)
	);
	pointer-events: none;
}

.dur-hero__inner {
	box-sizing: border-box;
	width: min(calc(100% - 2 * var(--dur-gutter, 20px)), var(--dur-max, 1200px));
	margin-inline: auto;
}

.dur-hero__label,
.dur-hero__title,
.dur-hero__subtitle {
	margin-block-start: 0;
}

.dur-hero__title {
	display: flex;
	flex-direction: column;
	margin-block-end: 0;
}

.dur-hero__title-light,
.dur-hero__title-bold {
	display: block;
}

.dur-hero__subtitle {
	margin-block-end: 0;
}

.dur-hero__cta {
	display: inline-flex;
}

.dur-hero__price {
	margin-block-start: 0;
}

.dur-hero__price > * + * {
	margin-inline-start: 0.28em;
}

/* The symbol and the amount always travel together: if the line is too narrow, they wrap as one block. */
.dur-hero__price-figure {
	display: inline-block;
	white-space: nowrap;
}

.dur-hero__price-figure > * + * {
	margin-inline-start: 0.28em;
}