/* Talents modal
======================================== */
#modal-talents{
	--color-txt: black;
	--color-bg: white;
}

/* Content */
#modal-talents .module-modal--content{
	padding: 0 var(--page-sides--m);
	display: grid;
	grid-auto-rows: min-content;
}
@media (min-width: 841px){
	#modal-talents .module-modal--content{
		padding-bottom: var(--m-header);
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--cols-medianil);
	}
}
@media (max-width: 840px){
	#modal-talents .module-modal--content{
		padding-bottom: var(--m-footer);
	}
}

/* Index */
@media (min-width: 841px){
	#talents-index{
		grid-area: 1 / 2;
		display: grid;
		grid-auto-rows: min-content;
		row-gap: var(--m-blocks);
	}
}
@media (max-width: 840px){
	#talents-index{
		display: none;
	}
}

/* Thumbnails */
@media (min-width: 841px){
	#talents-thumbnails{
		--w: calc((100vw - var(--page-sides--m)*2 - var(--cols-medianil)*2)/3);
		position: -webkit-sticky;
		position: sticky;
		top: var(--height-header);
		width: var(--w);
		height: calc(var(--w)*(5 / 4));
		max-height: calc(var(--height-viewport) - var(--height-header) - var(--m-header));
		align-self: flex-start;
		display: grid;
		grid-auto-rows: 100%;
		grid-auto-columns: 100%;
		pointer-events: none;
	}
	.devices #talents-thumbnails{
		display: none;
	}
	.talents-block--thumbnail{
		position: relative;
		width: auto;
		height: 100%;
		margin: 0 auto;
		grid-area: 1 / 1;
		aspect-ratio: 4 / 5; /* !!! */
		transition:
			opacity var(--global-speed) var(--global-ease--movement) 50ms,
			transform calc(var(--global-speed)*2) var(--global-ease--movement);
		overflow: hidden;
	}
	.desktop .talents-block--thumbnail:not(.active){
		opacity: 0;
		transform: translateY(var(--pos-y));
	}
	.talents-block--thumbnail .thumb{
		position: absolute;
		top: -1px;
		left: -1px;
		right: -1px;
		bottom: -1px;
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		object-fit: cover;
		z-index: 1;
	}
	.talents-block--caption{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		padding: var(--global-m);
		display: grid;
		align-items: center;
		-webkit-user-select: none;
			-moz-user-select: none;
			 -ms-user-select: none;
				  user-select: none;
		color: white;
		mix-blend-mode: difference;
		z-index: 2;
	}
}
@media (min-width: 841px) and (max-height: 500px){
	#talents-thumbnails{
		display: none;
	}
}
@media (max-width: 840px){
	#talents-thumbnails{
		display: none;
	}
}

/* Cards */
@media (min-width: 841px){
	#talents-cards{
		display: none;
	}
}
@media (max-width: 840px){
	#talents-cards{
		display: grid;
		grid-auto-rows: min-content;
		row-gap: var(--m-sections);
	}
	.talents-block--grid{
		display: grid;
		grid-auto-rows: min-content;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: var(--m-modules) var(--cols-medianil);
		align-items: flex-end;
	}
	/* .talents-block--grid > :only-child{
		grid-column: 1 / -1;
	} */
}

/* Blocks */
.talents-block{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--font-sans--leading-m);
}
.talents-block--title{
	margin: var(--font-sans--mblock-m);
	text-align: center;
}
.talents-block--index{
	margin: var(--font-serif--mblock-l);
	display: grid;
	grid-auto-rows: min-content;
	justify-items: center;
	text-align: center;
}
@media (max-width: 840px){
	.talents-block{
		row-gap: var(--m-blocks);
	}
}