@keyframes tc-ken-burns {
	0% {
		transform: scale(1) translate(0, 0);
	}
	25% {
		transform: scale(1.08) translate(-1%, 0);
	}
	50% {
		transform: scale(1.12) translate(-2%, -1%);
	}
	75% {
		transform: scale(1.10) translate(-1%, -2%);
	}
	100% {
		transform: scale(1.06) translate(0, -1%);
	}
}

.tc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

.tc-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition-property: opacity, transform;
	transition-duration: var(--tc-transition-duration, 0.5s);
	transition-timing-function: ease-in-out;
	will-change: transform, opacity;
}

.tc-img--normal {
	z-index: 1;
	opacity: 1;
}

.tc-img--hover {
	z-index: 2;
	opacity: 0;
	animation-name: tc-ken-burns;
	animation-duration: var(--tc-ken-burns-duration, 8s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: paused;
}

.tc-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background-color: var(--tc-overlay-normal, rgba(0, 0, 0, 0));
	transition-property: background-color;
	transition-duration: var(--tc-transition-duration, 0.5s);
	transition-timing-function: ease-in-out;
	pointer-events: none;
}

.tc-content {
	position: relative;
	z-index: 4;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: start;
	transform: translateY(12px);
	opacity: 0;
	transition-property: transform, opacity;
	transition-duration: var(--tc-transition-duration, 0.5s);
	transition-timing-function: ease-in-out;
}

.tc-role,
.tc-bio {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition-property: max-height, opacity;
	transition-duration: var(--tc-transition-duration, 0.5s);
	transition-timing-function: ease-in-out;
}

.tc-name-always-yes .tc-content {
	transform: translateY(0);
	opacity: 1;
}

.tc-name-always-yes .tc-role,
.tc-name-always-yes .tc-bio {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

.tc-card:hover .tc-img--normal,
.tc-card.tc-touch-active .tc-img--normal,
.tc-card.tc-active .tc-img--normal {
	opacity: 0;
}

.tc-card:hover .tc-img--hover,
.tc-card.tc-touch-active .tc-img--hover,
.tc-card.tc-active .tc-img--hover {
	opacity: 1;
	animation-play-state: running;
}

.tc-card:hover .tc-overlay,
.tc-card.tc-touch-active .tc-overlay,
.tc-card.tc-active .tc-overlay {
	background-color: var(--tc-overlay-hover, rgba(0, 0, 0, 0.55));
}

.tc-card:hover .tc-content,
.tc-card.tc-touch-active .tc-content,
.tc-card.tc-active .tc-content {
	transform: translateY(0);
	opacity: 1;
}

.tc-card:hover .tc-role,
.tc-card:hover .tc-bio,
.tc-card.tc-touch-active .tc-role,
.tc-card.tc-touch-active .tc-bio,
.tc-card.tc-active .tc-role,
.tc-card.tc-active .tc-bio,
.tc-name-always-yes .tc-card:hover .tc-role,
.tc-name-always-yes .tc-card:hover .tc-bio,
.tc-name-always-yes .tc-card.tc-touch-active .tc-role,
.tc-name-always-yes .tc-card.tc-touch-active .tc-bio,
.tc-name-always-yes .tc-card.tc-active .tc-role,
.tc-name-always-yes .tc-card.tc-active .tc-bio {
	max-height: 300px;
	opacity: 1;
}

.tc-name,
.tc-role,
.tc-bio {
	margin: 0;
}

@media (max-width: 1024px) {
	.tc-card {
		--tc-overlay-normal: var(--tc-overlay-normal-tablet, var(--tc-overlay-normal, rgba(0, 0, 0, 0)));
		--tc-overlay-hover: var(--tc-overlay-hover-tablet, var(--tc-overlay-hover, rgba(0, 0, 0, 0.55)));
	}
}

@media (max-width: 767px) {
	.tc-card {
		--tc-overlay-normal: var(--tc-overlay-normal-mobile, var(--tc-overlay-normal-tablet, var(--tc-overlay-normal, rgba(0, 0, 0, 0)));
		--tc-overlay-hover: var(--tc-overlay-hover-mobile, var(--tc-overlay-hover-tablet, var(--tc-overlay-hover, rgba(0, 0, 0, 0.55)));
	}
}

@media (hover: none) {
	.tc-card:not(.tc-touch-active):not(.tc-active) .tc-img--hover {
		animation-play-state: paused;
	}
}