/* Works
======================================== */
#works-wrapper{
	--m: calc(var(--rows-gap-s)/2);
	padding:
		calc(var(--m-top) - var(--m))
		calc(var(--page-sides) - var(--m))
		calc(var(--page-bottom) - var(--m));
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
@media (min-width: 835px){
	#works-wrapper{
		align-content: center;
		justify-content: center;
	}
}

/* Projects */
.project-card{
	padding: var(--m);
}
.project-card .thumbnail{
	height: calc(100/var(--global-scale)*100vw);
}
.project-card .thumb{
	width: auto;
	max-width: 100%;
	height: 100%;
}
.project-card .thumbnail-hidden{
	position: fixed;
	opacity: 0;
	pointer-events: none;
}
.project-card .thumbnail-hidden .thumb{
	opacity: 1 !important;
	transition: none !important;
}
.desktop .project-card:hover .thumbnail-hidden{
	opacity: 1;
}
.mobile .project-card .thumbnail-hidden{
	display: none;
}
@media (max-width: 1920px){
	.project-card .thumbnail{
		height: 100px;
	}
}
@media (min-width: 1181px){
	.thumbnail-hidden{
		height: calc((var(--height-viewport) - var(--height-header)*2)/2);
		width: auto;
		max-width: calc(100vw - var(--page-sides)*2);
	}
	.project-card:nth-child(8n + 1) .thumbnail-hidden{
		right: var(--page-sides);
		bottom: var(--height-header);
	}
	.project-card:nth-child(8n + 2) .thumbnail-hidden{
		left: var(--page-sides);
		bottom: var(--height-header);
	}
	.project-card:nth-child(8n + 3) .thumbnail-hidden{
		top: var(--height-header);
		left: var(--page-sides);
	}
	.project-card:nth-child(8n + 4) .thumbnail-hidden{
		top: var(--height-header);
		right: var(--page-sides);
	}
	.project-card:nth-child(8n + 5) .thumbnail-hidden{
		left: 50vw;
		bottom: var(--height-header);
		-webkit-transform: translateX(-50%);
				  transform: translateX(-50%);
	}
	.project-card:nth-child(8n + 6) .thumbnail-hidden{
		top: var(--height-header);
		left: 50vw;
		-webkit-transform: translateX(-50%);
				  transform: translateX(-50%);
	}
	.project-card:nth-child(8n + 7) .thumbnail-hidden{
		top: calc((var(--height-viewport) - var(--height-header))/2);
		left: var(--page-sides);
		-webkit-transform: translateY(-50%);
				  transform: translateY(-50%);
	}
	.project-card:nth-child(8n + 8) .thumbnail-hidden{
		top: calc((var(--height-viewport) - var(--height-header))/2);
		right: var(--page-sides);
		-webkit-transform: translateY(-50%);
				  transform: translateY(-50%);
	}
}
@media (max-width: 1180px){
	/* .thumbnail-hidden{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		display: grid;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}
	.thumbnail-hidden .thumb{
		width: calc(100vmin - var(--page-sides)*2);
		max-width: 600px;
		height: calc(100vmin - var(--height-header)*2);
		max-height: 600px;
		object-fit: contain;
	}
}
@media (max-width: 600px){ */
	.thumbnail-hidden{
		display: none;
	}
}

/* Caption */
#works-caption{
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--rows-gap) var(--page-sides);
	text-wrap: balance;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	color: white;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 8;
}
#works-caption:empty{
	display: none;
}
#works-caption > span:not(:last-child)::after{
	content: ', ';
}
.mobile #works-caption{
	display: none;
}
/* @media (max-width: 600px){
	.works-caption--title{
		display: block;
	}
	.works-caption--title::after{
		display: none;
	}
} */