:root {
	--ervaring-transition: all 0.1s ease-in-out;
}

.ervaring-layout {
	display: block; text-decoration: none;
	position: relative; border-radius: var(--radius-normal); overflow: hidden;
}
.ervaring-layout .ervaring-bg {
	position: relative; z-index: 1; overflow: hidden;
	background-color: var(--Identity-Highlight);
	aspect-ratio: 17/20;
}
.ervaring-layout .ervaring-bg:has(img)::before {
	content: ''; position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
}
.ervaring-layout .ervaring-bg img {
	position: relative; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover; transition: var(--ervaring-transition);
}
.ervaring-layout:hover .ervaring-bg img {
	scale: 1.1;
}

.ervaring-layout .ervaring-content {
	position: absolute; inset: 0; z-index: 3;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 2.5rem; color: #ffffff; text-decoration: none;
}
.ervaring-layout .ervaring-content .arrow {
	position: absolute; top: calc(2.5rem + 20px); right: calc(2.5rem + 20px); z-index: 5;
	display: flex; align-items: center; justify-content: center;
	background-color: #ffffff; border-radius: 100%;
	padding: 0px; translate: 50% -50%;
	scale: 0.75;
	transition: var(--ervaring-transition);
}
.ervaring-layout .ervaring-content .arrow svg {
	scale: 0;
	transform-origin: center;
	transition: var(--ervaring-transition);
}
/* .ervaring-layout:hover .ervaring-content .arrow {
	padding: 12px; scale: 1;
} */
/* .ervaring-layout:hover .ervaring-content .arrow svg {
	scale: 1;
} */
.ervaring-layout .ervaring-terms,
.ervaring-dialog .ervaring-terms {
	display: flex; align-items: center; gap: 0.5rem;
	padding-right: 40px; flex-wrap: wrap;
}
.ervaring-layout .ervaring-terms .ervaring-term,
.ervaring-dialog .ervaring-terms .ervaring-term {
	font-size: 14px; background-color: #ffffff; font-weight: 600;
	font-family: var(--heading-font); color: var(--text-color);
	padding: 0.25rem 0.5rem; border-radius: 0.25rem;
}
.ervaring-layout .ervaring-info .read-text {
	display: flex; align-items: center; gap: 0.5rem;
	font-weight: 600; margin-bottom: 1rem;
}
.ervaring-layout .ervaring-info .ervaring-title {
	color: inherit; margin-bottom: 1rem;
}
.ervaring-layout .ervaring-info .ervaring-text {
	overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}


.ervaring-layout.no-image .ervaring-content {
	color: var(--text-color);
}
.ervaring-layout.no-image .ervaring-terms .ervaring-term {
	background-color: var(--text-color); color: #ffffff;
}
.ervaring-layout.no-image .ervaring-content .arrow {
	background-color: var(--text-color);
}
.ervaring-layout.no-image .ervaring-content .arrow svg path {
	stroke: #ffffff;
}
.ervaring-layout.no-image .ervaring-content .read-text circle {
	fill: var(--Identity-Blue-1);
}
.ervaring-layout.no-image .ervaring-content .read-text path {
	fill: #ffffff;
}

.ervaring-dialog {
	border-radius: var(--radius-large); color: var(--text-color);
}
.ervaring-dialog .dialog-wrapper {
	padding: 2rem; max-width: 550px;
}
body .fl-page .ervaring-dialog > button {
	right: 3.5rem; top: 3.45rem;
}
body .fl-page .ervaring-dialog.no-banner > button {
	right: 1.5rem; top: 1.5rem;
}
.ervaring-dialog .dialog-banner {
	position: relative;
}
.ervaring-dialog .ervaring-terms {
	position: absolute; left: 0; top: 1.5rem; z-index: 2;
	width: 100%; padding-inline: 1.5rem;
}
.ervaring-dialog .ervaring-terms .ervaring-term:nth-child(n+2) {
	display: none;
}
.ervaring-dialog .dialog-video,
.ervaring-dialog .dialog-image img {
	aspect-ratio: 27/16; object-fit: cover; width: 100%;
	border-radius: var(--radius-normal); position: relative; z-index: 1;
	vertical-align: middle;
}
.ervaring-dialog .dialog-banner + .dialog-content {
	margin-top: 2rem;
}
.ervaring-dialog .dialog-title {
	margin-bottom: 1rem;
}
.ervaring-dialog .ervaring-author {
	display: flex; align-items: flex-start; gap: 1rem;
	margin-top: 1.5rem;
}
.ervaring-dialog .ervaring-author .author-photo {
	width: 52px; border-radius: 0.25rem; overflow: hidden;
}
.ervaring-dialog .ervaring-author .author-photo img {
	aspect-ratio: 1; width: 100%; height: auto; object-fit: cover;
}
.ervaring-dialog .ervaring-author .author-name {
	margin: 0; font-weight: 600;
}


@media screen and (max-width: 767px) {
	.ervaring-layout .ervaring-bg {
		aspect-ratio: 7/10;
	}
	.ervaring-layout .ervaring-content {
		padding: 1.5rem;
	}
	.ervaring-layout .ervaring-content .arrow {
		top: calc(1.5rem + 20px); right: calc(1.5rem + 20px);
	}
	.ervaring-layout .ervaring-terms .ervaring-term:nth-child(n+2) {
		display: none;
	}
	.ervaring-layout .ervaring-info .read-text,
	.ervaring-layout .ervaring-info .ervaring-title {
		margin-bottom: 0.5rem;
	}

	.ervaring-dialog .dialog-wrapper {
		padding: 1rem;
	}
	.ervaring-dialog .ervaring-terms {
		padding-inline: 1rem; top: 1rem;
	}
	body .fl-page .ervaring-dialog > button {
		right: 2rem; top: 2rem;
	}
	.ervaring-dialog .dialog-title {
		margin-bottom: 0.5rem;
	}
	.ervaring-layout.no-image .dialog-title {
		padding-right: 3rem;
	}
}
@media screen and (max-width: 360px) {
	.ervaring-layout .ervaring-info .ervaring-text {
		display: none;
	}
}