.patient-story-intro__layout {
	display: grid;
	grid-template-areas: "heading" "content";
	gap: var(--spacing-32);
	align-items: start;
}

.patient-story-intro__layout--with-cover {
	grid-template-areas: "heading" "media" "content";
}

.patient-story-intro__head {
	grid-area: heading;
	min-width: 0;
}

.patient-story-intro h1 {
	margin: 0;
	text-wrap: balance;
	font-size: clamp(var(--font-size-heading), calc(var(--font-size-xl) + 1.7vw), var(--font-size-display));
	line-height: var(--line-height-heading);
}

.patient-story-intro__content {
	grid-area: content;
	min-width: 0;
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
}

.patient-story-intro__content > * {
	max-width: 76ch;
}

.patient-story-intro__content p {
	margin: 0 0 var(--spacing-24);
}

.patient-story-intro__content h2 {
	margin-top: clamp(var(--spacing-32), 4vw, calc(var(--spacing-32) * 2));
}

.patient-story-intro__content ul {
	padding-left: var(--spacing-24);
	margin-bottom: 0;
}

.patient-story-intro__content li + li {
	margin-top: var(--spacing-14);
}

.patient-story-intro__content a {
	color: var(--color-blue);
	text-underline-offset: .2em;
}

.patient-story-intro__content > :first-child {
	margin-top: 0;
}

.patient-story-intro__content > :last-child {
	margin-bottom: 0;
}

.patient-story-intro__cover {
	grid-area: media;
	min-width: 0;
	margin: 0;
}

.patient-story-intro__cover a {
	display: block;
	cursor: zoom-in;
}

.patient-story-intro__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
	.patient-story-intro__layout--with-cover {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "heading media" "content media";
		column-gap: clamp(var(--spacing-32), 5vw, calc(var(--spacing-32) * 2));
	}
}

@media (min-width: 900px) and (min-height: 760px) {
	.patient-story-intro__cover {
		position: sticky;
		top: calc(var(--cosmic-header-offset, 0px) + var(--spacing-24));
		align-self: start;
	}
}