.content_cta-layout .image {
    position: relative;
    z-index: 1;
    height: 100%;
}
.content_cta-layout .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.content_cta-layout .image .number-block {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.flex-content[data-color_mode="white"] .content_cta-layout .content {
    background-color: var(--foam);
}
.flex-content[data-color_mode="white"]
    .content_cta-layout
    .content
    .kennis-label {
    background-color: #ffffff;
}
.content_cta-layout .content {
    position: relative;
    z-index: 2;
    grid-row: 1;
    background-color: #ffffff;
    padding: max(1.5rem, calc(3.5 * var(--su)));
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.04);
    translate: 0 max(1.5rem, calc(3.5 * var(--su)));
}
.content_cta-layout .content .kennis-label {
    margin-bottom: max(1rem, calc(1 * var(--su)));
}
.content_cta-layout .content .pk-heading {
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
}
.content_cta-layout .content .content-cta {
	padding: max(1.5rem, calc(2 * var(--su)));
    margin-top: max(2rem, calc(2 * var(--su)));
	background-color: var(--primary-jade);
	color: #ffffff;
}
.content_cta-layout .content .content-cta .avatars {
	margin-bottom: max(1rem, calc(1 * var(--su)));
}
.content_cta-layout .content .content-cta h2,
.content_cta-layout .content .content-cta h3,
.content_cta-layout .content .content-cta h4,
.content_cta-layout .content .content-cta h5,
.content_cta-layout .content .content-cta h6 {
	color: inherit;
}


@media screen and (min-width: 993px) {
    .content_cta-layout .image img {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

@media screen and (min-width: 768px) {
	.content_cta-layout {
		margin-bottom: calc((3.5 * var(--su)) + var(--global-row-spacing));
	}
    .content_cta-layout .image,
    .content_cta-layout .content {
        grid-row: 1;
    }
    .content_cta-layout[data-image-pos="right"] .image .number-block {
        left: auto;
    }
    .content_cta-layout .image .number-block {
        max-width: 50%;
    }
}

@media screen and (max-width: 992px) {
	.content_cta-layout .image img {
		aspect-ratio: 10/9;
	}
}

@media screen and (max-width: 767px) {
	.content_cta-layout .content {
		translate: none;
	}
	.content_cta-layout .content:has(.content-cta) {
		padding-bottom: 0;
	}
	.content_cta-layout .content .content-cta {
		margin-inline: -1.5rem;
	}
}
