.content_post-layout {
    margin-block: max(4rem, calc(8.75 * var(--su)));
}

.content_post-layout.has-background {
    margin-block: 0;
    padding-block: max(4rem, calc(8.75 * var(--su)));
    background: var(--ex-grey-blue);
}

.content_post-layout .pk-row-content.is-reversed .pk-card {
    order: 2;
}

.content_post-layout .pk-row-content.is-reversed .pk-content_wrap {
    order: 1;
}

/* Kaart (links) */
.content_post-layout .pk-card {
    position: relative;
    aspect-ratio: 1/1;
    padding: max(0.5rem, calc(1 * var(--su)));
    border-radius: max(1rem, calc(1.5 * var(--su)));
    background: var(--ex-red);
    overflow: hidden;
}

.content_post-layout .pk-card_image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: max(0.5rem, calc(1 * var(--su)));
    overflow: hidden;
}

.content_post-layout .pk-card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.content_post-layout .pk-card:hover .pk-card_image img {
    transform: scale(1.1);
}

.content_post-layout .pk-icon {
    position: absolute;
    top: max(1rem, calc(1 * var(--su)));
    right: max(1rem, calc(1 * var(--su)));
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(2rem, calc(2 * var(--su)));
    height: max(2rem, calc(2 * var(--su)));
    border-radius: 999px;
    background: var(--ex-white);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.161);
    transition: background-color 0.2s ease;
}

.content_post-layout .pk-card:hover .pk-icon {
    background: var(--ex-red);
}

.content_post-layout .pk-icon::before {
    font-family: "Material Symbols Outlined";
    content: "\e5c8";
    font-size: max(1rem, calc(1 * var(--su)));
    color: var(--ex-red);
    transition: transform 0.3s ease-in-out;
}

.content_post-layout .pk-card:hover .pk-icon::before {
    color: var(--ex-white);
    transform: rotate(-45deg);
}

.content_post-layout .pk-card_footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(1rem, calc(1 * var(--su)));
    padding-inline: max(1rem, calc(1 * var(--su)));
    transition: transform 0.3s ease;
}

.content_post-layout .pk-card_footer .pk-inner-wrap {
    padding: max(1rem, calc(1.5 * var(--su)));
    border-radius: max(1rem, calc(1 * var(--su)));
    background: var(--ex-white);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.078);
}

.content_post-layout .pk-card:hover .pk-card_footer,
.content_post-layout .pk-card:focus-within .pk-card_footer {
    transform: translateY(0);
}

.content_post-layout .pk-card:hover .pk-card_overzicht,
.content_post-layout .pk-card:focus-within .pk-card_overzicht {
    grid-template-rows: 1fr;
    margin-top: max(0.5rem, calc(0.5 * var(--su)));
}

.content_post-layout .pk-card_title {
    font-size: var(--dekstop-body-lg);
    font-weight: 500;
    color: var(--ex-grey-blue);
    line-height: 1.5;
    margin: 0;
}

.content_post-layout .pk-card_overzicht {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    transition:
        grid-template-rows 0.3s ease,
        margin-top 0.3s ease;
}

.content_post-layout .pk-card_overzicht-text {
    min-height: 0;
    overflow: hidden;
    font-size: var(--desktop-body-sm);
    color: var(--ex-grey-blue);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Content (rechts) */
.content_post-layout .pk-content_wrap .pk-heading {
    font-size: var(--scaling-h3);
}
.content_post-layout .pk-content_wrap .pk-text:not(.pk-bottom-row-text) {
    font-size: var(--desktop-body-md);
}

.content_post-layout .pk-content_wrap .pk-text {
    color: var(--ex-grey-blue);
    margin-top: max(1rem, calc(1 * var(--su)));
}

.content_post-layout .pk-subheading {
    margin-top: max(1.5rem, calc(1.5 * var(--su)));
    font-size: var(--scaling-h6);
    font-weight: 500;
    color: var(--ex-grey-blue);
}

.content_post-layout.has-background .pk-heading,
.content_post-layout.has-background .pk-text,
.content_post-layout.has-background .pk-subheading,
.content_post-layout.has-background .pk-points .pk-point {
    color: var(--ex-white);
}

.content_post-layout .pk-bottom-row-text {
    font-size: var(--desktop-body-sm);
}

.content_post-layout .pk-points {
    display: flex;
    flex-wrap: wrap;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    margin-top: max(1.5rem, calc(1.5 * var(--su)));
	margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.content_post-layout.has-background .pk-points .pk-point {
    border: 1px solid rgba(76, 84, 101, 1);
}

.content_post-layout .pk-point {
    display: flex;
    align-items: center;
	width: fit-content;
    gap: max(0.5rem, calc(0.5 * var(--su)));
    padding-block: max(0.625rem, calc(0.625 * var(--su)));
    padding-inline: max(1rem, calc(1 * var(--su)));
    margin: 0;
    border: 1px solid var(--ex-border);
    border-radius: max(0.5rem, calc(0.5 * var(--su)));
    font-size: var(--desktop-body-xs);
    color: var(--ex-grey-blue);
}

.content_post-layout .pk-point::before {
    font-family: "Material Symbols Outlined";
    content: "\e5ca";
    flex-shrink: 0;
    font-size: max(0.875rem, calc(0.875 * var(--su)));
    color: var(--ex-grey-blue);
}

.content_post-layout.has-background .pk-points .pk-point::before {
    color: var(--ex-white);
}

@media only screen and (min-width: 992px) {
    .content_post-layout .has-background {
        padding-inline: max(3rem, calc(3 * var(--su)));
    }

    /* Content (rechts) */
    .content_post-layout .has-background .pk-content_wrap {
        padding-inline: 0;
    }

    .content_post-layout .pk-content_wrap {
        padding-block: max(1rem, calc(2.5 * var(--su)));
        padding-inline: max(3rem, calc(3 * var(--su)));
    }
}

@media only screen and (max-width: 992px) {
    .content_post-layout .pk-content_wrap {
        margin-top: max(2rem, calc(2 * var(--su)));
    }
}

@media only screen and (max-width: 767px) {
	.content_post-layout > .pk-grid-container{
		gap: max(1.5rem, calc(1.5 * var(--su)));;
	}
    .content_post-layout .pk-card {
        order: 2;
    }

    .content_post-layout .pk-card_image {
        aspect-ratio: 1/1;
    }

	.content_post-layout .pk-card_footer {
		bottom: max(.5rem, calc(.5 * var(--su)));
		padding-inline: max(.5rem, calc(.5 * var(--su)));
	}

    .content_post-layout .pk-card_title {
        font-size: var(--dekstop-body-sm);
    }
	.content_post-layout .pk-card_footer .pk-inner-wrap{
    border-radius: max(.5rem, calc(.5 * var(--su)));
	border-bottom-left-radius: max(.4rem, calc(.4 * var(--su)));
	border-bottom-right-radius: max(.4rem, calc(.4 * var(--su)));
	}

    .content_post-layout .pk-card_overzicht-text {
        font-size: var(--desktop-body-xs);
    }

    .content_post-layout .pk-icon {
        width: max(1.5rem, calc(1.5 * var(--su)));
        height: max(1.5rem, calc(1.5 * var(--su)));
    }

    .content_post-layout .pk-icon::before {
        font-size: max(0.8em, calc(0.8 * var(--su)));
    }

    .content_post-layout .pk-points {
		flex-direction: column;
		gap: max(0.5rem, calc(0.5 * var(--su)));
    }

	

}