.use-case-card {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* "Stretched link": de knop blijft de echte link, maar dekt via ::after de
   hele kaart af zodat overal klikken naar de use case leidt. De
   reference-card (case study) ligt met een hogere z-index erbovenop, dus
   die blijft los klikbaar naar de case study. Geen geneste <a>'s nodig. */
.use-case-card .content .pk-button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.use-case-card .content {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	padding: max(1.5rem, calc(2.5 * var(--su)))
	         max(1.5rem, calc(5 * var(--su)))
	         max(2rem, calc(2.5 * var(--su)))
	         max(1.5rem, calc(2.5 * var(--su)));
	--text-color: var(--white-100);
	color: var(--text-color);
	background: radial-gradient(86.13% 124.62% at 90.71% 117.52%, var(--support-1) 0%, var(--primary-100) 100%), var(--white-100);
}

.use-case-card .content .title {
	color: var(--text-color);
}

.use-case-card .content .pk-button {
	margin-top: auto;
}

.use-case-card .image {
	position: relative;
	flex: 0 0 60%;
	min-height: max(28.125rem, calc(28.125 * var(--su)));
	overflow: hidden;
}

.use-case-card .image img {
	display: block;
	width: 100%;
	height: 100%;
	contain-intrinsic-size: unset;
	object-fit: cover;
	transition: scale 400ms ease;
}

.use-case-card:hover .image img,
.use-case-card:focus-within .image img,
.use-case-card:active .image img {
	scale: 1.05;
}

.use-case-card .nova-reference-card {
	position: absolute;
	z-index: 2;
	width: max(17.5rem, calc(17.5 * var(--su)));
	transition: translate 300ms ease;
}

.use-case-card:hover .nova-reference-card,
.use-case-card:focus-within .nova-reference-card,
.use-case-card:active .nova-reference-card {
	translate: 0 -.5rem;
}

.use-case-card:hover .nova-reference-card .arrow, .use-case-card:active .nova-reference-card .arrow {
	transform: rotate(-45deg);
	background-color: var(--accent-100);
	outline-color: var(--accent-100);
}

.use-case-card:hover .nova-reference-card .arrow::before , .use-case-card:active .nova-reference-card .arrow::before {
	background-color: var(--white-100);
}

.use-case-card .nova-reference-card hr {
	width: 80%;
}

@media screen and (min-width: 768px) {
	
	.use-case-card .nova-reference-card {
		left: max(1.5rem, calc(1.5 * var(--su)));
		bottom: max(1.5rem, calc(1.5 * var(--su)));
	}

}

@media screen and (max-width: 767px) {
	.use-case-card {
		flex-direction: column-reverse;
	}

	.use-case-card .content,
	.use-case-card .image {
		flex: 1 1 auto;
	}

	.use-case-card .image {
		order: -1;
		min-height: unset;
		aspect-ratio: 345/423;
	}


	.use-case-card .nova-reference-card {
		width: calc(100% - 2rem);
		bottom: 1rem;
		left: 1rem;
		right: 1rem;
	}
}