.flex-layout.projecten {
	padding-block: max(3rem, calc(5 * var(--su)));
}

.flex-layout.projecten .projecten-titel {
	text-align: center;
	margin-bottom: max(2.5rem, calc(3.5 * var(--su)));
}

.flex-layout.projecten .projecten-titel h2 {
	color: var(--gijs-groen);
	margin: 0;
}

.flex-layout.projecten .projecten-slider {
	width: 100%;
}

.flex-layout.projecten .projecten-slider .swiper {
	overflow: visible;
}

.flex-layout.projecten .projecten-slider .swiper-slide {
	height: max(25rem, calc(25 * var(--su)));
	opacity: 0.35;
	padding: max(0.75rem, calc(0.75 * var(--su)));
	border-radius: max(1.25rem, calc(1.25 * var(--su)));
	background: var(--gijs-wit);
	overflow: hidden;
	transition: opacity 0.4s ease-in-out;
}

.flex-layout.projecten .projecten-slider .swiper-slide-active {
	opacity: 1;
}

.flex-layout.projecten .projecten-card {
	display: grid;
	grid-template-columns: 305fr 445fr;
	height: 100%;
	text-decoration: none;
	color: inherit;
	gap: max(0.75rem, calc(0.75 * var(--su)));
}

.flex-layout.projecten .projecten-card-tekst {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 0;
	background: var(--gijs-geel);
	padding-block: max(1.25rem, calc(1.5 * var(--su)));
	padding-inline: max(1.25rem, calc(1.5 * var(--su))) max(1.75rem, calc(2.1875 * var(--su)));
	border-radius: max(0.7rem, calc(0.75 * var(--su)));
}

.flex-layout.projecten .projecten-card-tekst h3 {
	margin: 0;
	margin-bottom:10px;
	color: var(--gijs-groen);
	font-size: max(1.775rem, calc(1.775 * var(--su)));
	font-weight: 400;
	letter-spacing: -1.8px;
}

.flex-layout.projecten .projecten-card-tekst p {
	margin: 0;
	color: var(--gijs-groen);
}

.flex-layout.projecten .projecten-card-image {
	position: relative;
	height: 100%;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	border-radius: max(0.7rem, calc(0.75 * var(--su)));
}

.flex-layout.projecten .projecten-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: max(0.7rem, calc(0.75 * var(--su)));
	transition: transform 0.4s ease-in-out;
}

.flex-layout.projecten .projecten-card:hover .projecten-card-image img {
	transform: scale(1.05);
}

.flex-layout.projecten .projecten-card-arrow {
	position: absolute;
	inset-block-end: max(1.25rem, calc(1.5 * var(--su)));
	inset-inline-end: max(1.25rem, calc(1.5 * var(--su)));
	width: max(2.125rem, calc(2.125 * var(--su)));
	transition: transform 0.3s ease-in-out;
}

.flex-layout.projecten .projecten-card:hover .projecten-card-arrow {
	transform: scale(1.1);
}

.flex-layout.projecten .projecten-card-arrow svg {
	display: block;
	width: 100%;
	height: auto;
}

.flex-layout.projecten .projecten-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(0.75rem, calc(1 * var(--su)));
	margin-block-start: max(2rem, calc(2.5 * var(--su)));
}

.flex-layout.projecten .projecten-controls button {
	display: flex;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	outline: none;
}

.flex-layout.projecten .projecten-controls button rect {
	transition: fill 0.3s ease-in-out;
}

.flex-layout.projecten .projecten-controls button:not(.swiper-button-disabled):hover rect,
.flex-layout.projecten .projecten-controls button:not(.swiper-button-disabled):focus-visible rect {
	fill: var(--gijs-geel);
}

.flex-layout.projecten .projecten-pagination {
	position: static;
	width: auto;
	min-width: 4ch;
	text-align: center;
	color: var(--gijs-groen);
	font-size: var(--desktop-body-md);
}

.projecten-dialog .close-popup svg {
	color: var(--gijs-wit);
}

.projecten-dialog {
	background: var(--gijs-geel);
	border-radius: max(1.25rem, calc(1.25 * var(--su)));
	outline: none;
	overflow-x: hidden;
	overflow-y: auto;
}

.projecten-dialog-gallery {
	overflow: hidden;
	margin-block-end: max(1.5rem, calc(2 * var(--su)));
}

.projecten-dialog-gallery .swiper-slide {
	aspect-ratio: 1218 / 640;
	max-height:900px;
}

.projecten-dialog-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: max(0.9rem, calc(0.93 * var(--su)));
}

.projecten-dialog .close-popup {
    background-color: transparent;
}

.projecten-dialog .close-popup svg{
    color: var(--gijs-zwart);
}

.projecten-dialog-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: max(1.5rem, calc(2 * var(--su)));
}

.projecten-dialog-left {
	flex: 1;
}

.projecten-dialog-left h2 {
	margin: 0;
	color: var(--gijs-groen);
	font-size:max(3rem, calc(4.5 * var(--su)))
}

.projecten-dialog-right {
	display: flex;
	flex-direction: column;
	width: max(24rem, calc(32 * var(--su)));
}

.projecten-dialog-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: max(0.75rem, calc(1 * var(--su)));
}

.projecten-dialog-controls button {
	display: flex;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	outline: none;
}

.projecten-dialog-controls button rect {
	transition: fill-opacity 0.3s ease-in-out;
}

.projecten-dialog-controls button:not(.swiper-button-disabled):hover rect,
.projecten-dialog-controls button:not(.swiper-button-disabled):focus-visible rect {
	fill-opacity: 0.3;
}

.projecten-dialog-pagination {
	position: static;
	width: auto;
	color: var(--gijs-groen);
	font-size: var(--desktop-body-md);
}

.projecten-dialog-tekst {
	margin-block-start: max(3.75rem, calc(3.75 * var(--su)));
	color: var(--gijs-groen);
}

.projecten-dialog-tekst > *:last-child {
	margin-bottom: 0;
}

body dialog > .dialog-wrapper {
    width: max(40rem, calc(80 * var(--su)));
    max-width: 100%;
	padding: max(1.5rem, calc(2 * var(--su)));
}

@media screen and (min-width: 993px) {
.flex-layout.projecten .projecten-slider .swiper {
	width: max(40rem, calc(50 * var(--su)));
}
}

@media screen and (max-width: 992px) {
	.flex-layout.projecten {
		padding-block: max(4rem, calc(6 * var(--su)));
	}

	.projecten-dialog-gallery{
		margin-block-end: 20px;
	}
	
	.flex-layout.projecten .projecten-slider .swiper-slide {
		height: auto;
	}

	.flex-layout.projecten .projecten-card {
		grid-template-columns: 1fr;
		grid-template-rows: max(19rem, calc(22 * var(--su))) auto;
		gap: max(0.75rem, calc(0.75 * var(--su)));
		height: max(31.25rem, calc(31.25 * var(--su)));
	}

	.flex-layout.projecten .projecten-card-image {
		order: 1;
	}

	.projecten-dialog-gallery .swiper-slide{
		min-height:400px;
	}

	.flex-layout.projecten .projecten-card-image,
	.flex-layout.projecten .projecten-card-image img {
		border-radius: max(0.75rem, calc(0.937 * var(--su)));
	}

	.flex-layout.projecten .projecten-card-tekst {
		order: 2;
		padding-inline: max(1rem, calc(1 * var(--su)));
		border-radius: max(0.75rem, calc(0.937 * var(--su)));
	}
}

@media screen and (max-width: 767px) {
	.projecten-dialog-card {
		display: flex;
		flex-direction: column;
		gap: max(0.5rem, calc(1 * var(--su)));
	}

	.projecten-dialog-gallery {
		order: 1;
	}

	.projecten-dialog-row,
	.projecten-dialog-right {
		display: contents;
	}

	.projecten-dialog-controls {
		order: 2;
	}

	.projecten-dialog-left {
		order: 3;
	}

	.projecten-dialog-tekst {
		order: 4;
		margin-block-start: 0;
	}
}