.case-study-container {
	padding-top: var(--padding4);
	grid-template-areas: 
		"header header header header"
		"project project project project"
	;
	@media screen and (min-width: 35em) {
		grid-template-areas: "project project project project project header header header";
	}
	@media screen and (min-width: 50em) {
		grid-template-areas: "project project project project project project project project project header header header";
	}
	& .portfolio-header {
		grid-area: header;
	}
	& .portfolio-content {
		grid-area: project;
	}
}

.portfolio-header {
	& h1 {
		margin-top: 0;
		margin-bottom: var(--margin2);
	}
	& p {
		margin-top: 0;
		margin-bottom: var(--margin1Half);
	}
	h2 {
		margin-top: 0;
		margin-bottom: var(--margin1);
	}
}

.portfolio-content {
	hanging-punctuation: first last;
	& > * {
		margin: 0 0 var(--margin5);
	}
	& figure {
		margin: 0 0 var(--margin5);
	}
	& figure:has(+ p) {
		margin-bottom: var(--margin2);
	}
	& .image-link {
		text-decoration: none;
	}
	& img {
		width: 100%;
		height: auto;
		box-shadow: var(--shadowProminent);
	}
	& .video {
		background: var(--popupBackground);
		box-shadow: var(--shadowProminent);
		display: flex;
		justify-content: center;
		align-content: center;
		width: 100%;
		aspect-ratio: 16 / 9;
		& > * {
			width: 100%;
			height: 100%;
		}
	}
}