/**
 * Layout: Content blok
 * Slug: content_afbeelding
 */

.flex-content:has(.content_afbeelding-layout + .cta_content-layout) .content_afbeelding-layout {
	padding-bottom: max(330px, calc(20 * var(--su)));
	margin-bottom: min(-20 * var(--su), -330px);
}
.mira_content_d1-layout + .content_afbeelding-layout {
	background: transparent
}
.content_afbeelding-layout {
	background-color: #ffffff;
	border-radius: 2rem;
	padding-block: max(2rem, calc(6 * var(--su)));
}
.content_afbeelding-layout .pk-grid-container {
	align-items: center;
}

.content_afbeelding-layout .image-col {
	position: relative;
}
.content_afbeelding-layout .image-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 11/13;
    mask: url("../../../../assets/images/imageMask.svg");
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
}
.content_afbeelding-layout .image-col .custom-button {
	position: absolute;
	bottom: 10%;
	right: -10%;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 1em;
	background-color: #ffffff;
	box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.03);
	padding: max(1rem, calc(1.5 * var(--su)))
	max(1.5rem, calc(2 * var(--su)));
	border-radius: 1rem;
	text-decoration: none;
	font-size: 1.25rem;
	color: inherit;
	max-width: max(275px, calc(21.5 * var(--su)));
}
.content_afbeelding-layout .image-col .custom-button .icon-wrapper {
	width: max(2.25rem, calc(2.5 * var(--su)));
	flex-shrink: 0;
	aspect-ratio: 1;
	border-radius: 100%;
	background-color: var(--dia-green);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.content_afbeelding-layout .image-col .custom-button:hover .icon-wrapper {
	background-color: var(--dia-blue);
	color: #ffffff;
}

@media screen and (max-width: 992px) {
	.content_afbeelding-layout .image-col {
		order: 2;
		margin-top: 2rem;
	}
	.content_afbeelding-layout .image-col .custom-button {
		right: 5%;
		font-size: 1rem;
	}
}