.work-directory {
	margin: 0 auto;
}

.portfolio-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.portfolio-section {
	max-width: 1376px;
	display: grid;
	padding-top: var(--padding8);
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: var(--margin3);
	grid-template-areas: 
		"content content content content"
		"caseStudy caseStudy caseStudy caseStudy"
	;
	place-items: start;
	&:last-child {
		padding-bottom: var(--padding8);
	}
	@media screen and (min-width: 35em) {
		padding-top: var(--padding10);
		grid-template-columns: repeat(8, 1fr);
		grid-template-areas: 
			". content content content content content content ."
			"caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy"
		;
		&:last-child {
			padding-bottom: calc(var(--padding10) * 2);
		}
	}
	@media screen and (min-width: 60em) {
		padding-top: calc(var(--padding10) * 2);
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas: 
			". . .content content content content content content . . ."
			". . caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy caseStudy . ."
		;
		&:first-child {
			padding-top: var(--padding10);
		}
		&:last-child {
			padding-bottom: calc(var(--padding10) * 2);
		}
	}
	& .portfolio-section__content {
		grid-area: content;
		& h2 {
			display: flex;
			gap: var(--margin3);
			align-items: center;
			align-content: center;
			@media screen and (min-width: 35em) {
				transform: translateX(-56px);	
			}
			& svg {
				& rect, & circle, & line {
					stroke: var(--secondaryText);
				}
			}
		}
		& p, & ul, & ol {
			color: var(--secondaryText);
			& a {
				color: var(--secondaryText);
			}
		}
	}
	& .porfolio-section__work {
		grid-area: caseStudy;
	}
}

.work-results__tag {
	margin-top: var(--margin4);
}

.work-landing-page-container {
	container: workSummaryContainer / inline-size;
	box-sizing: border-box;
	display: flex;
	gap: var(--margin3);
	align-items: flex-start;
	overflow-y: hidden;
	padding-bottom: var(--padding1);
	margin-top: var(--margin4);
	margin-right: calc(var(--marginHalf) * -1);
	padding-right: var(--margin1Half);
	@media screen and (min-width: 42em) {
		height: 100vh;
		max-height: calc(100vh - var(--padding4) * 5.75);
		max-width: 82em;
		margin-right: 0;
		padding-right: 0;	
		align-items: center;
	}
	&.work-landing-page-container--with-tag {
		margin-top: 0;
		@media screen and (min-width: 42em) {
			max-height: calc(100vh - var(--padding4) * 6.5);
		}
	}
}