/* Work
==================================== */
#projects{
	--rows: 6;
	height: 100%;
	padding: 0 var(--margin-sides);
	display: grid;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
}
/* @media (max-height: 1328px){ */
@media (max-height: 1288px){
	#projects{
		--rows: 5;
	}
}
/* @media (max-height: 1179px){ */
@media (max-height: 1139px){
	#projects{
		--rows: 4;
	}
}
/* @media (max-height: 1019px){ */
@media (max-height: 979px){
	#projects{
		--rows: 3;
	}
}
/* !!! el salto se hace cuando el thumb mide 50px alto
@media (max-height: 829px){ */
@media (max-height: 789px){
	#projects{
		--rows: 2;
	}
}

@media (min-width: 835px){
	#projects{
		width: fit-content;
		width: -moz-fit-content;
		max-width: 100vw;
		min-height: 249px;
		grid-template-columns: repeat(calc(var(--projects-num)/var(--rows)), 1fr); /* !!! */
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--rows), 1fr);
		grid-gap: 60px 40px;
		overflow-x: scroll;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
}
@media (max-width: 834px){
	#projects{
		grid-template-columns: 1fr;
		grid-auto-rows: min-content;
		row-gap: var(--margin-sides);
		padding-bottom: calc(var(--height-viewport) - var(--height-header) - 60px - var(--height-txt) - var(--margin-sides) - ((100vw - var(--margin-sides)*2)/1.666))
	}
}
@media (max-width: 600px){
	#projects{
		row-gap: calc(var(--margin-sides)/2);
	}
}

/*Project Card*/
.project{
	display: grid;
	grid-auto-rows: 1fr min-content;
	row-gap: 30px;
}
.project .thumb{
	height: 100%;
	object-fit: cover;
	/* -webkit-transition: transform var(--speed) var(--ease);
		  -o-transition: transform var(--speed) var(--ease);
			  transition: transform var(--speed) var(--ease); */
}
.project-number div{
	display: none;
}
@media (min-width: 835px){
	.project > *{
		width: calc(((var(--height-projects) - 60px*(var(--rows) - 1))/var(--rows) - 30px - var(--height-txt))*1.666);
		min-width: calc(((249px - 60px*(var(--rows) - 1))/var(--rows) - 30px - var(--height-txt))*1.666);
	}
	.project-link{
		position: relative;
	}
	.project .thumb{
		position: absolute;
		transform-origin: top left;
	}
	.project.inactive .thumb,
	.project.active-genre .thumb,
	.project.active-year .thumb,
	.project.active-format .thumb,
	.project.active-clients .thumb,
	.project.active-lenghts .thumb{
		-webkit-transform: scale(0.4);
				  transform: scale(0.4);
	}
	.desktop .project .project-link:hover .thumb{
		-webkit-transform: scale(1);
				  transform: scale(1);
		-webkit-transition: none;
			  -o-transition: none;
				  transition: none;
	}
	.mobile .project-number{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min-content 1fr;
	}
	.mobile .project-number div{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile .project:not(
			.project.active-genre,
			.project.active-year,
			.project.active-format,
			.project.active-clients,
			.project.active-lenghts) .project-number div{
		display: block;
	}
}
@media (max-width: 834px){
	.project-number,
	.project.inactive,
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts{
		display: none !important;
	}
	.project{
		scroll-snap-align: start;
		scroll-margin-top: var(--height-header);
	}
	.project:not(.selected){
		pointer-events: none;
	}
	.project-link{
		width: 100%;
	}
	.project .thumb{
		height: calc((100vw - var(--margin-sides)*2)/1.666);
		/* -webkit-transition: transform var(--speed) linear;
			  -o-transition: transform var(--speed) linear;
				  transition: transform var(--speed) linear; */
	}
	.project.selected ~ .project:not(
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts) .thumb{
		transform: scale(0.8);
	}
	.project.selected ~ .project:not(
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts) ~ .project:not(
		.project.active-genre,
		.project.active-year,
		.project.active-format,
		.project.active-clients,
		.project.active-lenghts) .thumb{
		transform: scale(0.6);
	}
	.project.selected ~ .project:not(
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts) ~ .project:not(
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts) ~ .project:not(
	.project.active-genre,
	.project.active-year,
	.project.active-format,
	.project.active-clients,
	.project.active-lenghts) .thumb{
		transform: scale(0.4);
	}
}