.our-history {
	
	--color-empty: var(--color-brand-primary--700);

	--color-bar-1: color-mix(in srgb, var(--color-brand-primary--300), transparent 92%);
	--color-bar-2: color-mix(in srgb, var(--color-brand-primary--300), transparent 92%);

	--start-1: 10px;
	--width-1: 2px;
	--end-1: calc(var(--start-1) + var(--width-1));
	--gap-1-2: 44px;
	--start-2: calc(var(--end-1) + var(--gap-1-2));
	--width-2: 240px;
	--end-2: calc(var(--start-2) + var(--width-2));

	--gap-2-3: 34px;
	--start-3: calc(var(--end-2) + var(--gap-2-3));
	--width-3: 8px;
	--end-3: calc(var(--start-3) + var(--width-3));

	--gap-3-4: 64px;
	--start-4: calc(var(--end-3) + var(--gap-3-4));
	--width-4: 2px;
	--end-4: calc(var(--start-4) + var(--width-4));

	--gap-4-5: 2680px;
	--gap-4-5: 50%;
	--start-5: calc(var(--end-4) + var(--gap-4-5));
	--width-5: 360px;
	--start-5: calc(100% - var(--width-5));
	--end-5: calc(var(--start-5) + var(--width-5));
	
	--angle: -80deg;

	color: var(--color-brand-white);
	background-image:
		linear-gradient(var(--angle),
			var(--color-empty) var(--start-1),
			var(--color-bar-1) var(--start-1),
			var(--color-bar-1) var(--end-1),
			var(--color-empty) var(--end-1),
			
			var(--color-empty) var(--start-2),
			var(--color-bar-2) var(--start-2),
			var(--color-bar-2) var(--end-2),
			var(--color-empty) var(--end-2),

			var(--color-empty) var(--start-3),
			var(--color-bar-1) var(--start-3),
			var(--color-bar-1) var(--end-3),
			var(--color-empty) var(--end-3),

			var(--color-empty) var(--start-4),
			var(--color-bar-1) var(--start-4),
			var(--color-bar-1) var(--end-4),
			var(--color-empty) var(--end-4),

			var(--color-empty) var(--start-5),
			var(--color-bar-2) var(--start-5),
			var(--color-bar-2) var(--end-5),
			var(--color-empty) var(--end-5),

						
			var(--color-empty) 100%
		),
		linear-gradient(var(--color-empty), var(--color-empty))
	;

	.fluid {
		--fluid-min-out: 0px; /* Smallest size the element should be */
		--fluid-max-out: 100px; /* Largest size the element should be */
		--fluid-min-vw: 320px; /* Viewport width at which the element is at its smallest */
		--fluid-max-vw: 1920px; /* Viewport width at which the element is at its largest */

		--output-range: calc(var(--fluid-max-out) - var(--fluid-min-out));
		--viewport-range: calc(var(--fluid-max-vw) - var(--fluid-min-vw));
		--fluid-progress: calc((100dvw - var(--fluid-min-vw)) / var(--viewport-range));

		--clamped-dimension: clamp(
			var(--fluid-min-out),
			calc(var(--fluid-min-out) + var(--output-range) * var(--fluid-progress)),
			var(--fluid-max-out)
		);
	}

	.custom-v-spacer {
		--fluid-max-out: 20rem;
		--fluid-min-out: 0px;
		--fluid-max-vw: 1920px;
		--fluid-min-vw: var(--bp-md);
		height: var(--clamped-dimension);

		outline: 1px dashed red;
	}
}