:root {
	--circle: 100px;
}

main > section > div {
	position: relative;
	display: grid;
	gap: 0 !important;
	grid-template-columns: 
		[history-content-start] 
		calc(50% - var(--circle)) 
		[history-center-start] 
		calc(var(--circle) * 2)
		[history-center-end] 
		calc(50% - var(--circle))  
		[history-content-end] 
		!important;
	padding-block: var(--gap);
	background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(var(--tus-gold), .25) 50%, rgba(var(--tus-gold), .25) calc(50% + 3px), transparent calc(50% + 3px), transparent 100%);
}

main > * {
	margin-block: calc(var(--gap) / 2);

	> * {
		margin-bottom: 0;
	}
}

main > section > div > figure {
	grid-column-start: history-content-start !important;
	grid-column-end: history-center-start !important;
}
main > section > div:nth-child(2n) > figure {
	grid-column-start: history-center-end !important;
	grid-column-end: history-content-end !important;
}
main figure img {
	width: 100%;
}
@media (prefers-color-scheme: dark){
	main figure:not(.no-background) img{
		padding: var(--gap);
		background: #fff;
	}
}
main figure.small-img img {
	width: auto;
	min-width: 50%;
	margin: auto;
}
main figure aside * {
	text-align: justify;
	margin-top: var(--gap);
}

section > div > div {
	position: absolute;
	top: calc(50% - calc(var(--circle) / 2));
	top: 20%;
	left: calc(50% - calc(var(--circle) / 2));
	z-index: 1;
}
section > div > div > span {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 99999px;
	background: rgb(var(--tus-red));
	color: white;
	padding: var(--gap);
	font-size: 1.5rem;
	width: var(--circle);
}
section > div > div:before {
	content: "";
	width: calc(var(--circle) / 2);
	height: calc(var(--circle) / 2);
	background: rgb(var(--tus-red));
	position: absolute;
	top: calc(25% + calc(var(--circle) / 20));
	left: calc(-5% + calc(var(--circle) / 20));
	transform: rotate(45deg);
	z-index: -1;
}
section > div:nth-child(2n) > div:before {
	left: auto;
	right: calc(5% - calc(var(--circle) / 20));
}

@media (max-width: 1000px) {
	:root {
		--circle: 80px;
	}
	main > section > div {
		grid-template-columns: 1fr 15fr !important;
		gap: var(--gap) !important;
		background: linear-gradient(to right, transparent 0%, transparent calc(var(--circle) / 2), rgba(var(--tus-gold), .5) calc(var(--circle) / 2), rgba(var(--tus-gold), .5) calc(var(--circle) / 2 + 1px), transparent calc(var(--circle) / 2 + 1px), transparent 100%);
	}
	main > section > div > div {
		position: relative;
	}
	main > section > div > div:before {
		background: transparent !important;
	}
	main > section > div > figure {
		grid-column-start: auto !important;
		grid-column-end: auto !important;
	}
	main > section > div:nth-child(2n) > figure {
		grid-column-start: auto !important;
		grid-column-end: auto !important;
	}
}