/* Project header
======================================== */
#project-header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: var(--page-top) var(--page-sides) var(--rows-gap);
	display: grid;
	grid-template-columns: var(--txt-indent) 1fr max-content;
	grid-auto-rows: min-content;
	color: white;
	mix-blend-mode: difference;
	z-index: 9;
}

/* Number */
/* .project-slider #project-number::selection{
	color: black;
	background-color: white;
}
@media (max-width: 360px){
	#project-number{
		display: none;
	}
} */

/* Infos */
#project-infos{
	padding-right: var(--cols-gap);
	text-wrap: balance;
}
#project-infos:first-child{
	grid-column: 2 span;
}
#project-infos > span:not(:last-child)::after{
	content: ',';
}
.project-slider #project-infos *::selection{
	color: black;
	background-color: white;
}
/* @media (max-width: 600px){
	#project-title{
		display: block;
	}
	#project-title::after{
		display: none;
	}
} */
/* @media (min-width: 361px) and (max-width: 600px){
	#project-title{
		margin-left: var(--txt-indent);
	}
} */
/* @media (max-width: 360px){
	#project-infos{
		grid-column: 2 span;
	}
} */

/* Project close */
@media (min-width: 601px){
	#project-close span{
		display: none;
	}
	#project-close::after{
		content: 'Close';
	}
	.desktop #project-close:hover,
	.mobile #project-close:active{
		color: var(--color-txt--highlight-invert);
	}
}
@media (max-width: 600px){
	#project-close{
		--w: 20px;
		position: relative;
		width: var(--w);
		height: var(--height-txt);
		display: grid;
		align-items: center;
	}
	#project-close span{
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--w);
		height: 1px;
		background-color: white;
	}
	#project-close span:first-child{
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
			-moz-transform: translate(-50%, -50%) rotate(45deg);
			 -ms-transform: translate(-50%, -50%) rotate(45deg);
				  transform: translate(-50%, -50%) rotate(45deg);
	}
	#project-close span:last-child{
		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
			-moz-transform: translate(-50%, -50%) rotate(-45deg);
			 -ms-transform: translate(-50%, -50%) rotate(-45deg);
				  transform: translate(-50%, -50%) rotate(-45deg);
	}
	.desktop #project-close:hover span,
	.mobile #project-close:active span{
		background-color: var(--color-txt--highlight-invert);
	}
	.mobile #project-close::after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: calc(var(--w) + var(--page-sides)*2);
		height: calc(var(--page-top) + var(--height-txt) + var(--rows-gap));
		-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			 -ms-transform: translate(-50%, -50%);
				  transform: translate(-50%, -50%);
		z-index: 2;
	}
}