.medewerkers-overzicht-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6rem;
}

.medewerkers-overzicht-slider-wrap{
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.medewerkers-overzicht-slider-wrap:active,
.medewerkers-overzicht-slider-wrap.is-dragging{
	cursor: grabbing;
}

.medewerkers-overzicht-slider{
	display: flex;
}

.medewerkers-overzicht-slider-header{
	margin-bottom: 2.4rem;
	color: var(--blauw_100);
}

.medewerkers-overzicht-slider-title{
	margin: 0;
	color: var(--blauw_100);
	font-family: "Instrument Serif";
	font-size: 4rem;
	font-weight: 400;
	line-height: 1.1;
}

.medewerkers-overzicht-slider-link{
	color: var(--blauw_100);
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.3s;
}

.medewerkers-overzicht-slider-link:after{
	content: "\f061";
	display: inline-block;
	margin-left: 0.8rem;
	font-family: 'Font Awesome 6 Pro';
	font-weight: 400;
	text-decoration: none;
	transition: transform 0.3s;
}

.medewerkers_overzicht .medewerkers-overzicht-slider-link:is(:hover, :focus){
	color: var(--oranje);
	text-decoration: none;
}

.medewerkers-overzicht-slider-link:is(:hover, :focus):after{
	transform: translateX(0.4rem);
}

.medewerkers-overzicht--slider-row .tns-inner{
	margin: 0 !important;
}

.medewerker-card{
	display: inline-flex !important;
	flex-direction: column;
	gap: 1.9rem;
	color: var(--blauw_100);
	text-decoration: none !important;
}

.medewerker-card:is(:hover, :focus){
	color: var(--blauw_100);
}

.medewerker-card__image{
	position: relative;
	overflow: hidden;
	aspect-ratio: 390 / 510;
	background: var(--beige_100);
	width: 100%;
}

.medewerker-card__image:after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 27, 114, 0) 45%, rgba(0, 27, 114, 0.18) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.medewerker-card__image--fallback{
	display: flex;
	align-items: center;
	justify-content: center;
}

.medewerker-card__image--fallback:before{
	content: "";
	width: 70%;
	aspect-ratio: 1;
	background: url("medewerker-fallback.svg") center / contain no-repeat;
	opacity: 0.16;
}

.medewerker-card__image picture{
	display: block;
	width: 100%;
	height: 100%;
}

.medewerker-card__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.35s, transform 0.35s;
}

.medewerker-card:is(:hover, :focus) .medewerker-card__image img{
	filter: saturate(1.05) contrast(1.03);
	transform: scale(1.04);
}

.medewerker-card:is(:hover, :focus) .medewerker-card__image:after{
	opacity: 1;
}

.medewerker-card--cta{
	justify-content: center;
	aspect-ratio: 390 / 510;
	padding: 3rem;
	background: var(--blauw_75);
	color: #fff;
	max-width: 100%;
}

.medewerker-card--cta:is(:hover, :focus){
	color: #fff;
}

.medewerker-card__cta-inner{
    --default-margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	color: inherit;
}

.medewerker-card__cta-inner :is(h1, h2, h3, h4, p){
	color: inherit;
}

.medewerker-card__cta-inner :is(h2, h3){
	color: #fff !important;
}

.medewerker-card__content{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--blauw_100);
}

.medewerker-card .medewerker-card__title{
	margin: 0;
	color: var(--blauw_100);
	font-family: "Instrument Serif";
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.1;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
	transition: text-decoration-color 0.25s, transform 0.25s;
}

.medewerker-card__function{
	color: var(--blauw_100);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.3;
}

.medewerker-card__function :is(p, ul, ol){
	margin: 0;
}

.medewerker-card:is(:hover, :focus) .medewerker-card__title{
	text-decoration-color: currentColor;
	transform: translateY(-0.2rem);
}

.medewerkers-overzicht--slider-row .medewerker-card{
	gap: 1.9rem;
	user-select: none;
	-webkit-user-drag: none;
}

.medewerkers-overzicht--slider-row .medewerker-card.tns-item{
	display: inline-flex;
	flex-direction: column;
}

@media (max-width:767px)
{
	.medewerkers-overzicht-grid{
		grid-template-columns: 1fr;
		gap: 4rem;
	}

}

@media (min-width:768px) and (max-width:991px)
{
	.medewerkers-overzicht-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5rem 3rem;
	}
}

@media (min-width:992px) and (max-width:1199px)
{
	.medewerkers-overzicht-grid{
		gap: 5rem 3rem;
	}
}

@media (min-width:1200px) and (max-width:1399px)
{
	.medewerkers-overzicht-grid{
		gap: 6rem 4rem;
	}
}