/*
 * About Me (Figma: desktop 281:1961 · mobile 436:37). Intro + booking band: sections.css.
 * Photo crops (--z*) come from each image fill's Figma transform.
 */

/* Room photo — Frame 71 281:2161 (desktop), 436:56 (mobile) */
.zain-page-intro--about .zain-page-intro__photo {
	--zh: 111.96%;
	--zy: -12.02%;
}

.zain-story {
	display: grid;
	grid-template-columns: calc(633 * var(--s)) calc(701 * var(--s));
	column-gap: calc(117 * var(--s));
	align-items: start;
	width: calc(1728 * var(--s));
	margin-top: calc(158 * var(--s));
	padding-left: calc(230 * var(--s));
}

.zain-story__text {
	margin-top: calc(85 * var(--s));
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--story);
	line-height: var(--wp--custom--line-height--story);
}

/* Figma separates the paragraphs with one empty line */
.zain-story__text p + p {
	margin-top: var(--wp--custom--line-height--story);
}

/* Portrait — 357:1746 (desktop), 436:58 (mobile) */
.zain-story__portrait {
	--zh: 127.01%;
	height: calc(696 * var(--s));
	border-radius: calc(25 * var(--s));
}

.zain-book {
	margin-top: calc(160 * var(--s));
}

@media (max-width: 1199px) {
	.zain-page-intro--about .zain-page-intro__photo {
		--zw: 306.96%;
		--zh: 139.7%;
		--zx: -169.47%;
		--zy: -39.7%;
		height: calc(403 * var(--s));
	}

	.zain-story {
		grid-template-columns: 1fr;
		width: calc(440 * var(--s));
		margin-top: 40px;
		padding: 0 calc(24 * var(--s));
	}

	.zain-story__text {
		margin-top: 0;
	}

	.zain-story__portrait {
		--zw: 118.39%;
		--zh: 128.93%;
		--zx: -18.06%;
		height: calc(454 * var(--s));
		margin-top: 32px;
		border-radius: calc(20 * var(--s));
	}

	.zain-book {
		margin-top: calc(60 * var(--s));
	}
}