.ete-timeline {
	--ete-accent: #2563eb;
	--ete-line: #d7dce3;
	--ete-heading: #111827;
	--ete-text: #374151;
	--ete-card-bg: #fff;
	box-sizing: border-box;
	color: var(--ete-text);
	margin-inline: auto;
	width: 100%;
}

.ete-timeline *,
.ete-timeline *::before,
.ete-timeline *::after {
	box-sizing: border-box;
}

.ete-timeline__intro {
	margin: 0 auto 38px;
	max-width: 720px;
	text-align: center;
}

.ete-timeline__intro-title {
	color: var(--ete-heading);
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.1;
	margin: 0 0 14px;
}

.ete-timeline__intro-text,
.ete-timeline__text {
	color: var(--ete-text);
}

.ete-timeline__intro-text > :first-child,
.ete-timeline__text > :first-child {
	margin-top: 0;
}

.ete-timeline__intro-text > :last-child,
.ete-timeline__text > :last-child {
	margin-bottom: 0;
}

.ete-timeline__start-label {
	background: var(--ete-accent);
	border-radius: 999px;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin: 0 auto 22px;
	padding: 8px 15px;
	position: relative;
	text-align: center;
	width: max-content;
	z-index: 2;
}

.ete-timeline__items {
	--ete-item-gap: 48px;
	list-style: none;
	margin: 0;
	padding: 10px 0 20px;
	position: relative;
}

.ete-timeline__items::before {
	background: var(--ete-line);
	content: "";
	inset: 0 auto 0 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 3px;
}

.ete-timeline__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
	margin: 0 0 var(--ete-item-gap);
	position: relative;
}

.ete-timeline__item:last-child {
	margin-bottom: 0;
}

.ete-timeline__marker {
	align-self: start;
	background: var(--ete-accent);
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--ete-accent);
	grid-column: 2;
	height: 18px;
	justify-self: center;
	margin-top: 28px;
	position: relative;
	width: 18px;
	z-index: 2;
}

.ete-timeline__card {
	background: var(--ete-card-bg);
	border: 1px solid color-mix(in srgb, var(--ete-line) 80%, transparent);
	min-width: 0;
	position: relative;
}

.ete-timeline__item--left .ete-timeline__card {
	grid-column: 1;
	grid-row: 1;
}

.ete-timeline__item--right .ete-timeline__card {
	grid-column: 3;
	grid-row: 1;
}

.ete-timeline__card::after {
	background: var(--ete-card-bg);
	border-color: var(--ete-line);
	border-style: solid;
	content: "";
	height: 14px;
	position: absolute;
	top: 29px;
	transform: rotate(45deg);
	width: 14px;
}

.ete-timeline__item--left .ete-timeline__card::after {
	border-width: 1px 1px 0 0;
	right: -8px;
}

.ete-timeline__item--right .ete-timeline__card::after {
	border-width: 0 0 1px 1px;
	left: -8px;
}

.ete-timeline__year {
	color: var(--ete-accent);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin-bottom: 8px;
}

.ete-timeline__title {
	color: var(--ete-heading);
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 0 0 10px;
}

.ete-timeline__gallery {
	--ete-gallery-columns: 3;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(var(--ete-gallery-columns), minmax(0, 1fr));
	margin-top: 20px;
}

.ete-timeline__gallery a {
	display: block;
	overflow: hidden;
}

.ete-timeline__gallery img {
	display: block;
	height: 110px;
	object-fit: cover;
	transition: transform 180ms ease, filter 180ms ease;
	width: 100%;
}

.ete-timeline__gallery a:hover img,
.ete-timeline__gallery a:focus-visible img {
	filter: brightness(0.92);
	transform: scale(1.035);
}

.ete-timeline__gallery a:focus-visible {
	outline: 3px solid var(--ete-accent);
	outline-offset: 3px;
}

@supports not (color: color-mix(in srgb, black, white)) {
	.ete-timeline__card {
		border-color: var(--ete-line);
	}
}

@media (max-width: 767px) {
	.ete-timeline__intro {
		text-align: left;
	}

	.ete-timeline__start-label {
		margin-left: 0;
	}

	.ete-timeline__items::before {
		left: 15px;
		transform: none;
	}

	.ete-timeline__item {
		grid-template-columns: 31px minmax(0, 1fr);
	}

	.ete-timeline__marker {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		margin-left: 6px;
	}

	.ete-timeline__item--left .ete-timeline__card,
	.ete-timeline__item--right .ete-timeline__card {
		grid-column: 2;
		grid-row: 1;
	}

	.ete-timeline__item--left .ete-timeline__card::after,
	.ete-timeline__item--right .ete-timeline__card::after {
		border-width: 0 0 1px 1px;
		left: -8px;
		right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ete-timeline__gallery img {
		transition: none;
	}
}