.contact-persoon {
	--contact-persoon-border: #EBE5DB;
	--contact-persoon-muted: #808080;
	--contact-persoon-overlap: 48px;
	border-radius: var(--so-border-radius-l);
	overflow: hidden;
	border: 1px solid var(--contact-persoon-border);
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	width: 100%;

	margin: var(--so-group-spacing) 0;

	& > figure {
		margin: 0;
		overflow: hidden;
		background-color: var(--so-color-white);

		& img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 745 / 565;
			object-fit: cover;
		}
	}

	.contactpersoon-content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 42px;
		padding: 24px 32px;
		background-color: var(--so-color-white);

		@media (max-width: 768px) {
			gap: 16px;
		}

		@media (max-width: 576px) {
			flex-direction: column;
			align-items: flex-start;
			padding: 16px;

			.buttons-wrapper {
				flex-direction: column;
				width: 100%;

				> .button {
					width: 100%;
				}
			}
		}

		& figure {
			flex: 0 0 80px;
			width: 80px;
			height: 80px;
			margin: 0;
			overflow: hidden;
			border: 8px solid var(--so-color-secondary);
			border-radius: 50%;
			background-color: var(--so-color-primary);

			&.myb {
				background-color: var(--so-color-secondary);
				border-color: var(--so-color-primary);
			}

			& img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center bottom;
			}
		}

		& > div {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			gap: 8px;
			min-width: 0;

			& h3 {
				margin: 0;
			}
		}

		& p {
			margin: 0;
			color: var(--contact-persoon-muted);
			font-size: var(--so-font-size-body-m);
			line-height: 1.5;
		}

		& address {
			display: flex;
			flex-wrap: wrap;
			gap: 8px 32px;
			margin: 0;
			font-style: normal;
		}

		& address a {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			min-height: 24px;
			color: var(--so-color-text) !important;
			font-size: var(--so-font-size-body-m);
			line-height: 1.5;
			text-decoration: underline;
			text-underline-offset: 0.15em;
			overflow-wrap: anywhere;
			transition: color var(--so-transition-speed);

			& svg {
				flex: 0 0 20px;
				width: 20px;
				height: 20px;
				color: var(--so-color-secondary);
			}

			&:hover {
				color: var(--so-color-primary) !important;
			}

			&:focus-visible {
				outline: 2px solid var(--so-color-primary);
				outline-offset: 2px;
			}
		}

		& .buttons-wrapper {
			flex: 0 0 auto;
			margin: 0;
		}
	}

	&.has-image .contactpersoon-content {
		width: 100%
		margin: calc(var(--contact-persoon-overlap) * -1) 0 0;
	}

	@media (max-width: 768px) {
		& .contactpersoon-content {
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 16px;
			padding: 24px;
		}

		& .contactpersoon-content .buttons-wrapper {
			flex-basis: 100%;

			& .button {
				width: 100%;
			}
		}
	}

	@media (max-width: 576px) {
		& .contactpersoon-content address {
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		& .contactpersoon-content address a {
			transition: none;
		}
	}
}