/* Home
==================================== */
#projects-wrapper{
	width: 100vw;
	margin-top: var(--colsXL);
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: min-content;
	justify-items: center;
	background-color: var(--cbg);
}

/*Project Row Wrapper*/
.project-row_wrapper{
	width: 100vw;
	height: fit-content;
	height: -moz-fit-content;
	display: grid;
	justify-items: center;
	overflow: hidden;
}

/*Project Row*/
.project-row{
	position: relative;
	width: 100%;
	max-width: 1920px;
	height: fit-content;
	height: -moz-fit-content;
	padding: var(--colsS) calc(var(--sides) - var(--rows)) 0;
	grid-row: 1;
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;
	z-index: 4;
}
.project-row_wrapper:first-child .project-row{
	padding-top: 0;
}
.project-row .thumb{
	display: none;
	height: 100%;
}
@media (min-width: 769px){
	.project-row{
		width: fit-content;
		width: -moz-fit-content;
		height: calc(150px + var(--rows));
		padding-top: var(--rows);
	}
	.project-row_wrapper:first-child .project-row{
		height: 150px;
	}
	.project-row .thumb{
		width: auto;
		height: 150px;
		margin: 0 calc(var(--rows)/2);
	}
}
@media (max-width: 768px){
	.project-row{
		padding-left: var(--sides);
		padding-right: var(--sides);
	}
	.project-row .thumb:not(:first-child){
		display: none !important;
	}
}
@media (min-width: 321px) and (max-width: 768px){
	.project-row .thumb.square{
		width: 60vw;
	}
	.project-row .thumb.vertical{
		width: auto;
		height: calc(100vw - var(--sides)*2);
	}
}

/*Marquee*/
.marquee-project{
	grid-row: 1;
	grid-column: 1;
	pointer-events: none;
	z-index: 3;
}

/*Background*/
.bg-file_wrapper{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
.bg-file_wrapper::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	-webkit-backdrop-filter: blur(var(--blur));
			  backdrop-filter: blur(var(--blur));
}
.bg-file{
	width: 100%;
	height: 105%;
	object-fit: cover;
}

/*Hovers*/
/* .desktop .project-row{
	opacity: 1;
} */
.desktop .project-row:hover,
.desktop .project-row:not(:hover) ~ .marquee-project,
.desktop .project-row:not(:hover) ~ .bg-file_wrapper{
	opacity: 0;
}
/* .desktop .project-row:hover ~ .marquee-project{
	opacity: 1;
} */
/* .desktop .project-row:hover ~ .bg-file_wrapper{
	opacity: 1;
	transition: none;
	z-index: 1;
} */
.mobile .marquee-project,
.mobile .bg-file_wrapper{
	display: none;
}
.mobile .project-row:active ~ .marquee-project{
	display: grid;
	z-index: 5;
}