body.history {

	.history-overview-headline {
		--lh: 1.4;
		/* margin-block: 1lh 0; */
	}

	[id="history"] {
		--page-column-gap: 3ch;
		--section-gap: 1.25cap;

		container: history / inline-size;
		display: grid;
		gap: var(--page-column-gap);

		position: relative;

		margin-top: var(--content-padding-block);
		margin-inline: calc( var(--body-padding-inline) * -1 );
		padding-inline: var(--body-padding-inline);
		padding-block: var(--content-padding-block) calc(var(--content-padding-block) * 4);

		/* &:before {			
			background: var(--theme-background);
			mask: 
				linear-gradient(
					black,
					white 300px
				) luminance
			;
				
			content: "";
			inset: 0;
			position: absolute;
			z-index: -1;
		} */

		:is(.skills, .tools, .clients) ul {
			margin-top: 0;

			li { line-height: 1.25; }
		}

		.col-2 ul {			
			display: grid;
			gap: .5lh 2.5ch;
			justify-content: start;
			
			grid-template-columns: 1fr 1fr;
			padding-left: 1.25ch;
			margin-bottom: 2lh;
		}

		.col-2 li {
			display: grid;
			align-content: start;
			width: 100%;
		}

		:is(.skills, .tools, .clients) li,
		.team	.description {
			--fs: var(--fs-002);
			--lh: 1.5;
		}

		.teams-container {
			display: grid;
			gap: calc(var(--section-gap) * 2);
		}

		.team {
			/* color: oklch(var(--primary-20)); */
			display: grid;
			gap: .125lh;

			header {
				display: grid;
				gap: .125lh;
			}

			.org {				
				--fs: var(--fs-002);
				--fw: 540;
				/* color: oklch(var(--primary-35)); */
				opacity: .75;
				
			}
			
			.role {
				--fs: var(--fs-004);
				--fw: 600;
				/* color: oklch(var(--primary-10)); */
			}

			.description {}
			
			/* &.freelance strong {
				
				&::after {
					content: "🟆";
					color: oklch(var(--theme-accent));
					font-size: var(--fs-002);
					left: .25ch;
					top: -.5cap;
					position: relative;
				}
			} */

		}

		.legend {
			border-top: 1px solid oklch(var(--theme-accent));
			margin-top: 2.75cap;
			padding-top: 2.75cap;

			.freelance {
				strong {
					&::before {
						content: "🟆";
						color: oklch(var(--theme-accent));
						font-size: var(--fs-002);
						top: -.5cap;
						position: relative;
						padding-right: .5ch;
					}

					&::after {
						all: unset;
					}
				}
			}
		}		

		.client {
			break-inside: avoid;
		}
		
		@container page-wrapper (width >= 600px) and (width < 960px) {
			
			aside {
				display: grid;
				grid-template-areas: 
					"skills clients"
					"tools clients"
				;		
				grid-template-columns: 1fr 1fr;
				gap: var(--page-column-gap);
				margin-top: 2lh;

				.skills 	{ grid-area: skills; }
				.tools 		{ grid-area: tools; }
				.clients 	{ grid-area: clients; }	
			}

		}
		
		@container page-wrapper (width >= 960px) {
			/* grid-template-columns: max(240px, 25cqw) 1fr .35fr; */
			/* grid-template-areas: none; */
			/* grid-template-columns: .5fr 1fr .375fr; */
			grid-template-columns: .5fr 1fr;

			

		/* grid-template-areas: 
			"skills teams"
			"tools teams"
			"clients teams"
		; */

			aside { order: -1; }
		}

		@container page-wrapper (width >= 1024px) {
			--page-column-gap: 4cqw;
		}
	}

	
}


/* .content-columns {
	&--2 {
		@media (min-width: 1024px) {
			columns: 2;
			> * { width: calc(100% - 3ch); }
		}
	}
} */