body.selected-work {

	/* .project-preview-container {
		background: hsl(0 100% 50% / .05);
	}

	.project-description-container {
		background: hsl(50deg 100% 50% / .2);
	} */

	.projects-container {
		display: grid;
		gap: 2lh;		
		position: relative;

		/* &:before {			
			background: var(--theme-background);		
			mask: 
				linear-gradient(
					black,
					white 300px
				) luminance
			;

			content: "";
			inset: 0;
			position: absolute;
			z-index: -1;
		} */
	}

	.header-details {
		margin-bottom: var(--content-padding-block);			
	}

	.project {
		/* --pill-bg: oklch(var(--theme-lightest)); */

		/* background-image:
			linear-gradient(
				transparent,
				oklch(var(--block-color) /.025)
			) 
		; */
		/* color: oklch(var(--block-color)); */
		display: grid;
		gap: 0;
		/* height: 50cqh; */
		/* overflow: clip; */
		overflow: hidden;
		position: relative;
		min-height: 600px;

		&:first-of-type {		
			padding-top: 2.75lh;
		}
		
		&:nth-of-type(odd) {
			--block-color: var(--accent-20);	
		}
		
		&:nth-of-type(even) {			
			--block-color: var(--primary-20);
		}

		&:has(.mobile) {
			.project-preview-container {
				/* max-height: 60dvh; */
			}
			
			.project-preview {
				/* max-height: 60dvh; */
				max-height: 100cqh;
			}
		}

		/* .pill {
			--pill-bg: oklch(var(--block-color) / .05);
			--pill-text: oklch(var(--block-color));
		} */


		.project-logo {
			--inset: 3dvh;
			--bg: oklch(var(--theme-lightest) / .5);

			position: absolute;
			z-index: 50;

			bottom: var(--inset);
			left: var(--inset); 
			
			display: none;

			background: var(--bg);
			mix-blend-mode: screen;
			outline: 1dvw solid var(--bg);
			/* box-shadow: 0 0 60px 0 oklch(var(--block-color) / .25); */
			corner-shape: bevel;
			border-radius: 3px;
			
			/* aspect-ratio: 1; */
			height: 42px;
			width: auto;
			/* min-width: 42px; */
		}

		

		@media (prefers-reduced-motion: no-preference) {
			@supports (animation-timeline: view(10px)) {
				/* opacity: 0;
	
				animation-timeline: view(4dvh);
				animation-name: content-fade-in;
				animation-duration: 1s;
				animation-fill-mode: forwards; */
			}
		}
	}

	.project-description-container {
		display: grid;
		align-content: space-between;
		order: 2;
		padding-block: 2lh;
		/* padding-inline: 2ch; */

		.project-content-container {
			display: grid; 
			gap: 0lh;
			margin-bottom: 1lh;
		}

		.project-title {
			--fs: var(--fs-007);
			--fw: 720;
			margin-top: .5lh;
			margin-bottom: .5lh;
		}		
		
		.client-description,
		.project-description {
			--fs: var(--fs-003);
			--lh: 1.5;
		}
		
		.client-description {
			--fs: var(--fs-002);
			/* color: oklch(var(--accent-30)); */
			margin-bottom: .5lh;
			opacity: .75;
			a { color: inherit; }
		}
	}

	.project-details-container {
		--fs: var(--fs-002);
		--lh: 1;
		color: oklch(var(--block-color) / .94);
		margin-top: 1lh;

		li { list-style: none; }
	}

	

	.pill-container {
		margin-top: 1lh;
	}

	.links-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: .75lh;
		
		a {
			--fs: var(--fs-002);
			background: color-mix(in oklab, currentColor, transparent 90%);
			border-radius: 1.5dvw;
			display: flex;
			gap: 4px;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 1.25cap 1.5ch;
			text-decoration: none; 

			&:has(#social-codepen) {
				background: none;
				border: 3px solid color-mix(in oklab, currentColor, transparent 95%);
			}

			svg { 
				height: 18px; 
				width: unset;

				path { fill: currentColor; }
			}

			.new-page-arrow {
				align-self: end;
			}
		}
	}

	.project-preview-container {
		container: preview-container / size;
		display: flex;
		align-content: center;
		justify-content: space-between;
		/* gap: 1cqw; */
		/* min-height: 480px; */
		/* height: 50dvh; */
		max-height: 75dvh;		
		height: 100cqh;
		/* padding-inline: 10cqi; */
		position: relative;
		order: 1;
		/* max-width: 960px; */
		/* min-width: max-content; */
		/* overflow: clip; */
		/* overflow-clip-margin: 20px; */
		overflow: hidden;
		
		&:not(.no-mask) {
			mask: 
				linear-gradient(
					white 30%, 
					gray 75%,
					black 95%
				) luminance
			;
		}
		
		.project-preview {
			/* min-height: 25dvh; */
			/* max-height: 60dvh; */
			
			/* background: var(--theme-background);
			background-blend-mode: luminosity; */

			/* box-shadow: 0 0 120px 4px var(--theme-background); */
			
			width: 100%;
			
			@media (prefers-reduced-motion: no-preference) {
				animation-name: fade-in-up;
				animation-duration: 1.5s;
				animation-fill-mode: forwards;
			}
			
			&.mobile {
				--inset: 1cqw;
				--rotation: 0deg;
				border-radius: 1cqw;
				position: relative;
				width: 100cqw;
				
				@media (prefers-reduced-motion: no-preference) {
					overflow-y: scroll;
					scrollbar-width: none;
					cursor: ns-resize;
				}
				
				img { 
					/* max-width: 360px;  */
				}
			}		

			&.mobile:nth-of-type(1) {
				/* position: absolute; */
				width: 150cqw;
				/* max-width: 50cqw; */
				order: 2;
				z-index: 3;
			}
			
			&.mobile:nth-of-type(2) {
				order: 1;	
				left: var(--inset);
				rotate: calc(var(--rotation) * -1);
			}
			
			&.mobile:nth-of-type(3) {
				order: 3;
				right: var(--inset);
				rotate: var(--rotation);
			}
			
			&.mobile:not(:first-of-type) {
				margin-top: 2lh;
				
				img {
					/* opacity: .75;
					mix-blend-mode: luminosity;
					filter: grayscale(100%); */
				}
			}


			&.desktop {
				position: absolute;
				max-width: 75cqw;				

				img { 
					max-width: 960px;
				}
			}
			
			&.desktop:nth-of-type(1) {
				right: -10cqw;

				order: 3;
				z-index: 3;
			}
			
			&.desktop:nth-of-type(2) {
				left: 20cqw;
				top: 2lh;

				order: 2;
				/* rotate: -5deg; */
				z-index: 2;
			}
			
			&.desktop:nth-of-type(3) {
				left: 0cqw;
				top: 4lh;

				/* rotate: -10deg; */
				order: 1;
			}

			&.desktop:not(:first-of-type) {}


			picture {
				border-radius: 1.5cqw;
				/* overflow: clip; */
			}

			img {
				/* max-width: 960px; */
				/* position: relative; */
				
				height: auto;
				width: 100%;
				/* z-index: 1; */
			}
		}

		&:has(iframe) {
			padding: 0;
		}
	}

	iframe {
		border: 0;
		width: 100%;
		/* resize: both; */
		min-height: 50dvh;
	}

	

	@container page-wrapper (width <= 480px) {
		.project:not(:has(iframe)) {			
			.project-preview-container {
				height: 100cqw;
			}
		}
	}

	@container page-wrapper (width >= 960px) {
		.projects-container {
			margin-inline: calc( var(--content-padding-inline) * -1 );
		}

		.project {
			grid-template-columns: 1fr 480px;	
			/* margin-inline: calc(var(--body-padding-inline) * -1.25);	 */
			/* height: 84dvh; */
			gap: 1dvw;
			
			.project-description-container {
				padding-inline: 2dvw;
				/* max-width: 450px; */
			}
			
			.project-content-container {}

			.project-preview-container {
				/* max-height: 80cqh; */
				max-height: 60cqh;

				.project-preview.desktop:nth-of-type(1) {
					/* right: -50cqw; */
				}
			}
	
			.project-logo {	
				display: initial; 
			}
		
			/* &:nth-of-type(odd) {			
				grid-template-columns: 1fr auto;
				.project-description-container { order: 2; }			
				.project-description-container { padding-inline: 2.25lh; }
			} */
		
			/* &:nth-of-type(even) {
				grid-template-columns: auto 1fr;
				.project-preview-container { order: 2; }
				.project-logo {	right: 2dvw; }
				.project-description-container {	padding-inline: 2lh 1lh; }
			} */
			
		}
	}

	
}


/* @container root (width >= 1280px) {
	.projects-container {
		grid-template-columns: auto auto;
	}
} */