/* ===========================================================================
   cl-physio — ueber-mich.css
   "Über mich": three media rows (shared .media-row) + testimonials.
   Most layout comes from components.css.

   The three portraits are tall (2:3, and 1:1.65 for "Die Vision"). Capping
   their height and letting object-fit: cover do the rest chopped the lower
   half of each figure, so the balance is held by capping the WIDTH of the
   media column instead: the images keep their natural proportions and are
   shown whole.
   =========================================================================== */

.ueber-mich .media-row__media {
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}

.ueber-mich .media-row__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

@media (min-width: 880px) {
	/* Two columns from here on. The image column no longer stretches to the
	   row height — a portrait that fills its width is tall enough on its own,
	   and .media-row centres the text alongside it. */
	.ueber-mich .media-row__media {
		max-width: 440px;
	}
	.ueber-mich .media-row__img {
		height: auto;
		max-height: none;
	}
}

/* ---------------------------------------------------------------------------
   „Das bin ich“ — two-image carousel (FR-31, URS §9.1: Bilder 14 and 106a)

   components.css frames every non-hero carousel at 3:2, which is right for the
   landscape allocations but would crop a portrait to a letterbox. The slot is
   2:3, as the surrounding portraits are, so the viewport is re-framed here —
   per-location framing belongs with the page, not the shared component.

   Both delivered slides are exactly 2:3, so object-fit: cover crops nothing;
   an owner-uploaded image of another ratio is centre-cropped to the slot
   rather than changing the height of the row.

   The .ueber-mich prefix is needed to outweigh the :not(.carousel--hero)
   selector in components.css, not for scoping alone.
   --------------------------------------------------------------------------- */
.ueber-mich .carousel--portrait .carousel__viewport {
	aspect-ratio: 2 / 3;
}