/**
 * Media frame
 *
 * Fixed-ratio image container that doubles as a placeholder block while
 * artwork is missing — the label inside is shown until an <img> lands.
 *
 * Usage:
 *   <div class="media media--3x4"><img src="..." alt=""></div>
 *   <div class="media media--fill"><span class="media__label">Hero image</span></div>
 */

.media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--color-surface-muted);
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media__label {
	padding: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-muted);
}

/* --- Ratios --- */

.media--3x4 { aspect-ratio: 3 / 4; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--2x1 { aspect-ratio: 2 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }

/* Fills whatever height the parent gives it. */
.media--fill {
	height: 100%;
	min-height: 18rem;
}

.media--sage { background: var(--color-surface-strong); }