.flex-layout.project_detail .panel {
	--panel-gap: max(3rem, calc(5 * var(--su)));
	display: flex;
	flex-direction: column;
	gap: var(--panel-gap);
	min-width: 0;
}

.flex-layout.project_detail .subkop {
	margin: 0;
	background: linear-gradient(90deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	width: fit-content;
}

.flex-layout.project_detail .subkop + .project-info {
	margin-top: calc(var(--panel-gap) * -0.6);
}

.flex-layout.project_detail .project-info {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	column-gap: max(3rem, calc(5 * var(--su)));
	row-gap: max(1.5rem, calc(2 * var(--su)));
}

.flex-layout.project_detail .beschrijving p:last-child {
	margin-bottom: 0;
}

.flex-layout.project_detail .meta {
	display: flex;
	flex-direction: column;
	gap: max(0.75rem, calc(1 * var(--su)));
	margin: 0;
}

.flex-layout.project_detail .meta-rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
}

.flex-layout.project_detail .meta dt {
	font-weight: 700;
}

.flex-layout.project_detail .meta dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.flex-layout.project_detail .galerij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(1rem, calc(1.75 * var(--su)));
}

.flex-layout.project_detail .galerij-item {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.flex-layout.project_detail .galerij-item:last-child img {
	clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
}

.flex-layout.project_detail .galerij-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease-in-out;
}

.flex-layout.project_detail .galerij-item .plus {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: max(1.5rem, calc(2 * var(--su)));
	height: max(1.5rem, calc(2 * var(--su)));
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.flex-layout.project_detail .galerij-item .plus::before,
.flex-layout.project_detail .galerij-item .plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	background: var(--brand-teal);
}

.flex-layout.project_detail .galerij-item .plus::before {
	width: 100%;
	height: 2px;
}

.flex-layout.project_detail .galerij-item .plus::after {
	width: 2px;
	height: 100%;
}

.flex-layout.project_detail .galerij-item:hover img,
.flex-layout.project_detail .galerij-item:focus-visible img,
.flex-layout.project_detail .galerij-item:focus img,
.flex-layout.project_detail .galerij-item:active img{
	opacity: 0.2;
}

.flex-layout.project_detail .galerij-item:hover .plus,
.flex-layout.project_detail .galerij-item:focus-visible .plus,
.flex-layout.project_detail .galerij-item:focus .plus,
.flex-layout.project_detail .galerij-item:active .plus{
	opacity: 1;
}

.flex-layout.project_detail .galerij-dialog {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	padding: max(3rem, calc(5 * var(--su)));
	border: 0;
	background: var(--white);
}

.flex-layout.project_detail .galerij-dialog::backdrop {
	background: var(--white);
	opacity: 1;
}

.flex-layout.project_detail .galerij-dialog img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - max(6rem, calc(10 * var(--su))));
	object-fit: contain;
}

.flex-layout.project_detail .galerij-vorige,
.flex-layout.project_detail .galerij-volgende {
	position: fixed;
	top: 50%;
	z-index: 2;
	width: max(2.5rem, calc(3 * var(--su)));
	height: max(2.5rem, calc(3 * var(--su)));
	padding: 0;
	border: 0;
	background: var(--white);
	color: var(--brand-teal);
	cursor: pointer;
	transform: translateY(-50%);
}

.flex-layout.project_detail .galerij-vorige { left: max(0.5rem, calc(1 * var(--su))); }
.flex-layout.project_detail .galerij-volgende { right: max(0.5rem, calc(1 * var(--su))); }

.flex-layout.project_detail .galerij-vorige::before,
.flex-layout.project_detail .galerij-volgende::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	height: 45%;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.flex-layout.project_detail .galerij-vorige::before { transform: translate(-35%, -50%) rotate(-135deg); }
.flex-layout.project_detail .galerij-volgende::before { transform: translate(-65%, -50%) rotate(45deg); }

.flex-layout.project_detail .dialog-sluiten {
	position: absolute;
	top: max(0.5rem, calc(0.75 * var(--su)));
	right: max(0.5rem, calc(0.75 * var(--su)));
	width: max(2rem, calc(2.5 * var(--su)));
	height: max(2rem, calc(2.5 * var(--su)));
	padding: 0;
	border: 0;
	background: var(--white);
	cursor: pointer;
}

.flex-layout.project_detail .dialog-sluiten::before,
.flex-layout.project_detail .dialog-sluiten::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 55%;
	height: 2px;
	background: var(--brand-teal);
}

.flex-layout.project_detail .dialog-sluiten::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.flex-layout.project_detail .dialog-sluiten::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.flex-layout.project_detail .video-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 max(1rem, calc(1.5 * var(--su)));
	padding: 0;
	border: 0;
	background: none;
	color: var(--brand-teal);
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	cursor: pointer;
}

.flex-layout.project_detail .video-label svg {
	transition: transform 0.3s ease-in-out;
}

.flex-layout.project_detail .video-label:hover svg,
.flex-layout.project_detail .video-label:focus svg,
.flex-layout.project_detail .video-label:active svg{
	transform: translateX(0.25em);
}

.flex-layout.project_detail .video-afbeelding img {
	display: block;
	width: 100%;
	height: max(25rem, calc(30.9 * var(--su)));
	object-fit: cover;
}

.flex-layout.project_detail .video-afbeelding {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.flex-layout.project_detail .video-dialog {
	width: min(90vw, 1200px);
	padding: 0;
	border: 0;
	background: var(--white);
}

.flex-layout.project_detail .video-dialog::backdrop {
	background: var(--white);
	opacity: 1;
}

.flex-layout.project_detail .video-inhoud {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: max(2.5rem, calc(3 * var(--su)));
	background: var(--black);
}

.flex-layout.project_detail .video-inhoud iframe,
.flex-layout.project_detail .video-inhoud video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.flex-layout.project_detail .terug {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--brand-teal);
	font-weight: 700;
	text-decoration: none;
}

.flex-layout.project_detail .terug svg {
	transition: transform 0.3s ease-in-out;
}

.flex-layout.project_detail .terug:hover svg,
.flex-layout.project_detail .terug:focus svg,
.flex-layout.project_detail .terug:active svg{
	transform: translateX(-0.25em);
}

@media screen and (max-width: 991px) {
	.flex-layout.project_detail .project-info {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 767px) {
	.flex-layout.project_detail .galerij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.flex-layout.project_detail .galerij-dialog[open] {
		display: flex;
		align-items: center;
	}
}