.timeline {
	display: grid;
	grid-template:
		'top top top' var(--vr-spacing-4)
		'left text text' auto
		'left image image' auto
		'bottom bottom bottom' var(--vr-spacing-2)
		/ var(--hr-spacing-2) auto auto;
	gap: 0 var(--hr-spacing-1);
	margin-left: calc(-1 * var(--hr-spacing-2));
}

.timeline__top {
	grid-area: top;
	position: relative;
	overflow: hidden;
}

.timeline__left {
	grid-area: left;
	position: relative;
	overflow: hidden;
}

.timeline__text {
	grid-area: text;
	padding-top: var(--vr-spacing-1);
}

.timeline__image {
	grid-area: image;
}

.timeline__bottom {
	grid-area: bottom;
	position: relative;
	overflow: hidden;
}

.timeline__arrow-tail {
	width: var(--hr-spacing-2);
	position: absolute;
	top: 0;
	left: 0;
}

.timeline__arrow-body {
	width: var(--hr-spacing-2);
	position: absolute;
}

.timeline__arrow-head {
	width: var(--hr-spacing-2);
	position: absolute;
	left: 0;
	bottom: 0;
}

.timeline__arrow-line {
	position: absolute;
	height: 11px;
	width: 1284px;
	top: var(--vr-spacing-2);
	left: 11px;
}

@media screen and (min-width: 900px) {
	.timeline {
		grid-template:
			'top top top' var(--vr-spacing-4)
			'left text image' auto
			'bottom bottom bottom' var(--vr-spacing-2)
			/ var(--hr-spacing-2) auto auto;
		gap: 0 var(--hr-spacing-2);
		margin-left: initial;
	}
}