.scene-20 {
	margin-inline: auto;
	max-width: var(--max-width);
}

.scene-20 .content {
	padding-inline: 10%;
	padding-top: min((100vw - 375px) * (140 - 50) / (2560 - 375) + 50px, 140px);
	padding-bottom: min((100vw - 375px) * (140 - 30) / (2560 - 375) + 30px, 140px);
}

.scene-20 .headline-1 {
	color: var(--black);
	font-size: var(--font-size-100-16);
}

.scene-20 .headline-2 {
	color: var(--brown);
	font-size: var(--font-size-210-34);
	font-weight: 500;
	margin-left: 1em;
}

.scene-20 .grid {
	display: grid;
	grid-row-gap: min((100vw - 375px) * (200 - 50) / (2560 - 375) + 50px, 200px);
	margin-block: min((100vw - 375px) * (300 -75) / (2560 - 375) + 75px, 300px);
}

@media (min-width: 800px) {
	.scene-20 .grid {
		align-items: center;
		grid-column-gap: 11%;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.scene-20 .grid-item {
	display: grid;
	justify-items: center;
}

@media (min-width: 800px) {
	.scene-20 .grid-item:nth-child(2n) {
		grid-column: 2/3;
		justify-items: start;
	}
	.scene-20 .grid-item:nth-child(2n+1) {
		grid-column: 1/2;
		justify-items: end;
	}

	.scene-20 .grid-item:nth-child(1) { grid-row: 1/3; }
	.scene-20 .grid-item:nth-child(2) { grid-row: 2/4; }
	.scene-20 .grid-item:nth-child(3) { grid-row: 3/5; }
	.scene-20 .grid-item:nth-child(4) { grid-row: 4/6; }
	.scene-20 .grid-item:nth-child(5) { grid-row: 5/7; }
	.scene-20 .grid-item:nth-child(6) { grid-row: 6/8; }
	.scene-20 .grid-item:nth-child(7) { grid-row: 7/9; }
}

.scene-20 .grid-item-image {
	margin-bottom: 8%;
	width: 100%;
}

.scene-20 .grid-item-image-1 {
	height: min((100vw - 375px) * (237 - 72) / (2560 - 375) + 72px, 237px);
}

.scene-20 .grid-item-image-2 {
	height: min((100vw - 375px) * (268 - 89) / (2560 - 375) + 89px, 268px);
}

.scene-20 .grid-item-image-3 {
	height: min((100vw - 375px) * (310 - 102) / (2560 - 375) + 102px, 310px);
}

.scene-20 .grid-item-image-4 {
	height: min((100vw - 375px) * (388 - 128) / (2560 - 375) + 128px, 388px);
}

.scene-20 .grid-item-image-5 {
	height: min((100vw - 375px) * (643 - 151) / (2560 - 375) + 151px, 643px);
}

.scene-20 .grid-item-image-6 {
	height: min((100vw - 375px) * (679 - 131) / (2560 - 375) + 131px, 679px);
}

.scene-20 .grid-item-image-7 {
	height: min((100vw - 375px) * (864 - 123) / (2560 - 375) + 123px, 864px);
}

.scene-20 .grid-item-year {
	color: var(--black);
	font-size: var(--font-size-40-16);
	font-weight: 500;
	line-height: 1.5;
	margin-bottom:  min((100vw - 375px) * (20 - 6) / (2560 - 375) + 6px, 20px);
	position: relative;
}

@media (min-width: 800px) {
	.scene-20 .grid-item-year:before {
		background-color: var(--green-border);
		border-radius: 50%;
		content: '';
		height: min((100vw - 375px) * (43 - 20) / (2560 - 375) + 20px, 43px);
		position: absolute;
		top: min((100vw - 375px) * (12 - 6) / (2560 - 375) + 6px, 12px);
		width: min((100vw - 375px) * (43 - 20) / (2560 - 375) + 20px, 43px);
	}

	.scene-20 .grid-item:nth-child(2n+1) .grid-item-year:before {
		right: calc(-1 * min((100vw - 375px) * (133 - 26) / (2560 - 375) + 26px, 133px));
	}

	.scene-20 .grid-item:nth-child(2n) .grid-item-year:before {
		left: calc(-1 * min((100vw - 375px) * (133 - 26) / (2560 - 375) + 26px, 133px));
	}

	.scene-20 .grid-item:not(:last-child) .grid-item-year:after {
		border-right: 4px dotted #7c7c7c;
		content: '';
		--low: 260; --big: 590;
		height: min((100vw - 375px) * (var(--big) - var(--low)) / (2560 - 375) + var(--low)*1px, var(--big)*1px);
		position: absolute;
		top: min((100vw - 375px) * (32 - 16) / (2560 - 375) + 16px, 32px);
		width: 0;
		z-index: -1;
	}

	.scene-20 .grid-item:nth-child(2n+1) .grid-item-year:after {
		right: calc(-1 * min((100vw - 375px) * (114 - 19) / (2560 - 375) + 19px, 114px));
	}

	.scene-20 .grid-item:nth-child(2n) .grid-item-year:after {
		left: calc(-1 * min((100vw - 375px) * (114 - 19) / (2560 - 375) + 19px, 114px));
	}

	.scene-20 .grid-item:nth-child(2) .grid-item-year:after { --low: 140; --big: 460; }
	.scene-20 .grid-item:nth-child(3) .grid-item-year:after { --low: 210; --big: 530; }
	.scene-20 .grid-item:nth-child(4) .grid-item-year:after { --low: 260; --big: 770; }
	.scene-20 .grid-item:nth-child(5) .grid-item-year:after { --low: 140; --big: 610; }
	.scene-20 .grid-item:nth-child(6) .grid-item-year:after { --low: 130; --big: 700; }

}

.scene-20 .grid-item-headline {
	color: var(--brown);
	font-size: var(--font-size-55-20);
	font-weight: 500;
	line-height: 1.2;
	margin-bottom:  min((100vw - 375px) * (20 - 6) / (2560 - 375) + 6px, 20px);
	text-align: center;
}

@media (min-width: 800px) {
	.scene-20 .grid-item:nth-child(2n) .grid-item-headline {
		text-align: left;
	}
	.scene-20 .grid-item:nth-child(2n+1) .grid-item-headline {
		text-align: right;
	}
}

.scene-20 .grid-item-text {
	color: var(--black);
	font-size: var(--font-size-26-16);
	line-height: 1.375;
	max-width: 28ch;
	text-align: center;
}

@media (min-width: 800px) {
	.scene-20 .grid-item:nth-child(2n) .grid-item-text {
		text-align: left;
	}
	.scene-20 .grid-item:nth-child(2n+1) .grid-item-text {
		text-align: right;
	}
}

.scene-20 .grid-item-content-image {
	height: auto;
	margin-top:  min((100vw - 375px) * (20 - 6) / (2560 - 375) + 6px, 20px);
	width: 100%;
}