.sq-block--timeline {
	color: var(--text-color);
	background: var(--color-purple--2);
	padding: 64px 0;
}

.sq-block--timeline .sq-container {
	overflow: hidden;
}

/* Het origineel geeft deze container `bleedMobile`, wat de horizontale marge
   alleen onder 1000px uitschakelt; daarboven blijft de strook naast de tekst. */
@media only screen and (max-width: 999px) {
	.sq-block--timeline .sq-container {
		--bs-gutter-x: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

.sq-timeline-layout {
	--item-width: 77.608vw;
	--container-padding: 16px;

	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 0;
}

.sq-timeline-layout::-webkit-scrollbar {
	display: none;
}

.sq-timeline-images {
	width: calc(var(--total-items) * var(--item-width) + var(--container-padding));
	height: calc(54.464 * var(--vh));
	display: block;
}

.sq-timeline-images__grid {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template: ". gridOne . gridTwo . gridThree . gridFour ." 1fr / 84fr 528fr 96fr 443fr 48fr 417fr 103fr 245fr 172fr;
}

.sq-timeline-grid-one {
	grid-area: gridOne;
	display: grid;
	grid-template-columns: 248fr 168fr 112fr;
	grid-template-rows: 120fr 168fr 200fr;
}

.sq-timeline-grid-two {
	grid-area: gridTwo;
	display: grid;
	grid-template-columns: 185fr 23fr 235fr;
	grid-template-rows: 31fr 116fr 69fr 256fr 16fr;
}

.sq-timeline-grid-three {
	grid-area: gridThree;
	display: grid;
	grid-template: "." 86fr "figureFive" 288fr "." 114fr / 1fr;
}

.sq-timeline-grid-four {
	grid-area: gridFour;
	display: grid;
	grid-template: "." 117fr "figureSix" 226fr "." 145fr / 1fr;
}

.sq-timeline-figure {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.sq-timeline-figure--one {
	grid-area: 1 / 1 / 3 / 3;
	border-radius: 48px 0 0 0;
}

.sq-timeline-figure--two {
	grid-area: 2 / 2 / 4 / 4;
}

.sq-timeline-figure--three {
	z-index: 1;
	grid-area: 2 / 1 / 4 / 3;
}

.sq-timeline-figure--four {
	grid-area: 3 / 2 / 5 / 4;
}

.sq-timeline-figure--five {
	grid-area: figureFive;
}

.sq-timeline-figure--six {
	grid-area: figureSix;
	border-radius: 0 0 48px 0;
}

.sq-timeline-images picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.sq-timeline-images img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sq-timeline {
	margin: 48px 0 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--item-width);
	padding: 0 var(--container-padding);
	list-style: none;
}

.sq-timeline-item {
	position: relative;
	padding-right: 32px;
}

.sq-timeline-item::before {
	content: '';
	position: absolute;
	display: block;
	height: 2px;
	top: 5.9rem;
	left: 0;
	right: 0;
	background: var(--color-purple--1);
}

.sq-timeline-item.is-first-item::before {
	left: 32px;
}

.sq-timeline-item.is-last-item::before {
	right: calc(100% - 32px);
}

.sq-timeline-item.has-no-year {
	padding-top: 40px;
}

/* De prefix .sq-block--timeline wint van de oudere `.sq-timeline time`-regel in
   style.css, die anders zijn typografie hierin lekt. */
.sq-block--timeline .sq-timeline-year {
	display: block;
	font-family: var(--font-macan-stencil);
	font-size: 3.2rem;
	line-height: 1.25;
	letter-spacing: -0.05em;
	font-weight: 500;
}

/* bodyDefault uit het origineel: 1.6rem / 175%, fluid naar 2.8rem tussen 1792 en
   2560px. Losse waarden in plaats van de globale `.sq-body`, want die zet ook een
   margin-top op elke volgende child en de tijdlijnrand staat hier vóór de tekst. */
.sq-timeline__text {
	position: relative;
	padding-top: 40px;
	font-size: 1.6rem;
	line-height: 1.75;
}

/* Bootstrap zet p { margin-bottom: 1rem }; de tekst is hier één alinea binnen
   een flex-item dat verticaal centreert, dus die marge verschuift hem. */
.sq-timeline__text > p {
	margin: 0;
}

.sq-timeline__text::before,
.sq-timeline__text::after {
	content: '';
	display: block;
	position: absolute;
	background: var(--background-color);
	border-radius: 50%;
}

.sq-timeline__text::before {
	width: 24px;
	height: 24px;
	top: 8px;
	left: 24px;
}

.sq-timeline__text::after {
	width: 16px;
	height: 16px;
	left: 28px;
	top: 12px;
	border: 2px solid var(--text-color--accent);
}

.sq-timeline__border {
	display: none;
}

@media only screen and (min-width: 600px) {
	.sq-timeline-layout {
		--item-width: 50vw;
		--container-padding: 32px;
	}

	.sq-timeline-item::before {
		top: 7.65rem;
	}

	.sq-timeline-item.has-no-year {
		padding-top: 5.75rem;
	}

	.sq-block--timeline .sq-timeline-year {
		font-size: 4.6rem;
	}
}

@media only screen and (min-width: 1000px) {
	/* Paneelopmaak hangt aan de scrollrichting en niet aan de schermbreedte, dus
	   alles hieronder is op body.scroll_horizontal gescoopt; op een verticale
	   pagina valt het blok terug op de stroomlayout hierboven. `:where()` houdt de
	   specificiteit op nul, zodat de bredere media-queries verderop blijven winnen. */

	:where(body.scroll_horizontal) .sq-block--timeline {
		min-width: var(--window-width);
		height: var(--window-height);
		padding: 0;
		overflow: hidden;
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-container {
		height: 100%;
		position: relative;
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-container::before,
	:where(body.scroll_horizontal) .sq-block--timeline .sq-container::after {
		content: '';
		position: absolute;
		width: 50%;
		right: 0;
		height: 192px;
		background: linear-gradient(180deg, rgb(124 0 166 / 0%) 0%, #7C00A6 100%);
		pointer-events: none;
		z-index: 1;
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-container::before {
		top: 0;
		transform: matrix(1, 0, 0, -1, 0, 0);
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-container::after {
		bottom: 0;
	}

	:where(body.scroll_horizontal) .sq-timeline-layout {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--gutter);
	}

	:where(body.scroll_horizontal) .sq-timeline-images {
		width: 100%;
		height: 100%;
		padding-top: calc(var(--header-height) + 48px);
		padding-bottom: 144px;
		padding-right: 32px;
	}

	:where(body.scroll_horizontal) .sq-timeline-images__grid {
		grid-template-columns: 1fr;
		grid-template-rows: 464fr 94fr 321fr 68fr 175fr 45fr 181fr;
	}

	:where(body.scroll_horizontal) .sq-timeline-grid-one {
		z-index: 4;
		grid-area: 1 / 1 / 3 / 2;
		grid-template-columns: 336fr 80fr 200fr;
		grid-template-rows: 190fr 98fr 270fr;
	}

	:where(body.scroll_horizontal) .sq-timeline-grid-two {
		z-index: 3;
		grid-area: 2 / 1 / 5 / 2;
		grid-template-columns: 156fr 80fr 128fr 130fr 122fr;
		grid-template-rows: 158fr 26fr 299fr;
	}

	:where(body.scroll_horizontal) .sq-timeline-figure--three {
		grid-area: 1 / 2 / 3 / 4;
	}

	:where(body.scroll_horizontal) .sq-timeline-figure--four {
		grid-area: 2 / 3 / 4 / 5;
	}

	:where(body.scroll_horizontal) .sq-timeline-grid-three {
		z-index: 1;
		grid-area: 4 / 1 / 7 / 2;
		grid-template: ". figureFive ." 1fr / 101fr 416fr 99fr;
	}

	:where(body.scroll_horizontal) .sq-timeline-grid-four {
		z-index: 2;
		grid-area: 6 / 1 / 8 / 2;
		grid-template: ". figureSix" 1fr / 372fr 244fr;
	}

	:where(body.scroll_horizontal) .sq-timeline {
		display: block;
		padding: calc(var(--header-height) + 304px) 0 144px;
		margin: 0;
		grid-column-start: 2;
	}

	/* De prefix .sq-block--timeline wint van de oudere `.sq-timeline li`-regels in
	   style.css, die anders hun grid, lijnpositie, rand en `gap: 2rem` hierin
	   lekken; dat laatste zou het bolletje naast de tijdlijn duwen. */
	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-item {
		display: flex;
		align-items: center;
		gap: 0;
		padding: 0 0 var(--header-height);
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-item::before {
		inset: 0 auto 0 151px;
		height: auto;
		width: 2px;
		border-left: none;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.is-first-item::before {
		left: 151px;
		top: 0;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.has-no-year {
		padding-top: 0;
		padding-left: 120px;
	}

	:where(body.scroll_horizontal) .sq-timeline-year {
		min-width: 120px;
		flex-shrink: 0;
		text-align: right;
	}

	:where(body.scroll_horizontal) .sq-timeline__text {
		padding: 0 0 0 64px;
	}

	:where(body.scroll_horizontal) .sq-timeline__text::before,
	:where(body.scroll_horizontal) .sq-timeline__text::after {
		top: 50%;
		transform: translateY(-50%);
	}

	:where(body.scroll_horizontal) .sq-timeline__text::before {
		left: 20px;
	}

	:where(body.scroll_horizontal) .sq-timeline__text::after {
		left: 24px;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.is-first-item .sq-timeline__border,
	:where(body.scroll_horizontal) .sq-timeline-item.is-last-item .sq-timeline__border {
		position: absolute;
		left: 31px;
		display: block;
		background: var(--background-color);
		width: 2px;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.is-first-item .sq-timeline__border {
		top: 0;
		bottom: 50%;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.is-last-item .sq-timeline__border {
		top: 50%;
		bottom: calc(var(--header-height) * -1);
	}
}

@media only screen and (min-width: 1400px) {
	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-item::before,
	:where(body.scroll_horizontal) .sq-timeline-item.is-first-item::before {
		left: 199px;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.has-no-year {
		padding-left: 168px;
	}

	:where(body.scroll_horizontal) .sq-timeline-year {
		min-width: 168px;
	}

	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-year {
		font-size: 5.6rem;
	}
}

@media only screen and (min-width: 1792px) {
	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-item::before,
	:where(body.scroll_horizontal) .sq-timeline-item.is-first-item::before {
		left: 311px;
	}

	:where(body.scroll_horizontal) .sq-timeline-item.has-no-year {
		padding-left: 280px;
	}

	:where(body.scroll_horizontal) .sq-timeline-year {
		min-width: 280px;
	}

	/* Vloeiende schaal van 5.6rem op 1792px naar 11.2rem op 2560px, zoals de
	   live site. */
	:where(body.scroll_horizontal) .sq-block--timeline .sq-timeline-year {
		font-size: clamp(5.6rem, calc(5.6rem + 5.6rem * (100vw - 1792px) / 768px), 11.2rem);
	}

	/* Zelfde fluid schaal als de globale `.sq-body` in dit bereik:
	   1.6rem op 1792px naar 2.8rem op 2560px. */
	:where(body.scroll_horizontal) .sq-timeline__text {
		font-size: max(1.6rem, min(-1.2rem + 1.5625vw, 2.8rem));
	}
}