.c-timeline {
	background: var(--tl-bg);
	padding-block: var(--block-spacing-top, var(--spacing-xl)) var(--block-spacing-bottom, var(--spacing-xl));
}

.c-timeline__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-timeline__rows {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-timeline__row {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-lg);
}

.c-timeline__entries {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-col);
	margin: 0;
	padding: 0 var(--spacing-lg);
	list-style: none;
}

.c-timeline__entry {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.c-timeline__year,
.c-timeline__text {
	margin: 0;
}

/* Figma's 624x350 collage canvas — everything inside is sized as a share of it so it scales. */
.c-timeline__media {
	aspect-ratio: 624 / 350;
	position: relative;
}

/*
 * Figma places each photo at its own aspect ratio on a near-constant height, so the width is the
 * image's business, not ours — a fixed width share fits only the two ~1.09 images and left the
 * 1.31 and 1.37 ones 15% and 19% narrow AND cover-cropped. max-width is a guard, not a design
 * value: it stops a panorama overflowing the canvas into the text column.
 */
.c-timeline__photo {
	display: block;
	width: auto;
	max-width: 80%;
	height: 98.3%;
	border-radius: var(--radius-rounded);
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	rotate: 3.34deg;
	object-fit: cover;
}

.c-timeline__illustration {
	display: block;
	width: 27%;
	height: 40%;
	position: absolute;
	z-index: 1;
	object-fit: contain;
}

.c-timeline__illustration--top {
	top: 5%;
	left: 6%;
}

.c-timeline__illustration--bottom {
	top: 55%;
	right: 7%;
}

.c-timeline__row:nth-child(even) .c-timeline__media {
	order: -1;
}

.c-timeline__row:nth-child(even) .c-timeline__photo {
	rotate: -3.34deg;
}

.c-timeline__row:nth-child(even) .c-timeline__illustration--top {
	right: 5%;
	left: auto;
}

.c-timeline__row:nth-child(even) .c-timeline__illustration--bottom {
	right: auto;
	left: 6%;
}

@media (width < 900px) {
	.c-timeline__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-timeline__row:nth-child(even) .c-timeline__media {
		order: 0;
	}

	.c-timeline__entries {
		padding-inline: 0;
	}
}