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

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

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

/* Kaart (links) */
.content_post_quote-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_quote-layout .pk-card_image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: max(0.5rem, calc(1 * var(--su)));
    overflow: hidden;
}

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

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

.content_post_quote-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_quote-layout .pk-card:hover .pk-icon {
    background: var(--ex-red);
}

.content_post_quote-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_quote-layout .pk-card:hover .pk-icon::before {
    color: var(--ex-white);
    transform: rotate(-45deg);
}

.content_post_quote-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_quote-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_quote-layout .pk-card:hover .pk-card_footer,
.content_post_quote-layout .pk-card:focus-within .pk-card_footer {
    transform: translateY(0);
}

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

.content_post_quote-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_quote-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_quote-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_quote-layout .pk-content_wrap {
    display: flex;
    font-size: var(--scaling-h3);
}

.content_post_quote-layout .pk-quote-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: max(1.5rem, calc(2 * var(--su)));
    border-radius: max(1rem, calc(1.5 * var(--su)));
    background: #4c5465;
}

.content_post_quote-layout .pk-quote-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(3.5rem, calc(3.5 * var(--su)));
    height: max(3.5rem, calc(3.5 * var(--su)));
    background: var(--ex-white);
    border: 1px solid var(--ex-grey-blue-10);
    border-radius: 999px;
}

.content_post_quote-layout .pk-icon-small {
    position: absolute;
    top: max(-0.313rem, calc(-0.313 * var(--su)));
    right: max(-0.313rem, calc(-0.313 * var(--su)));
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(1.5rem, calc(1.5 * var(--su)));
    height: max(1.5rem, calc(1.5 * var(--su)));
    padding: max(0.5rem, calc(0.5 * var(--su)));
    border-radius: 999px;
    background: var(--ex-grey-blue);
}

.content_post_quote-layout .pk-quote-icon svg {
    width: max(1.25rem, calc(1.25 * var(--su)));
    height: max(1.25rem, calc(1.25 * var(--su)));
}

.content_post_quote-layout .pk-quote-card__quote {
    margin: max(1.5rem, calc(1.5 * var(--su))) 0 0;
    padding: 0;
    font-size: var(--desktop-body-xl);
    line-height: 1.5;
    color: var(--ex-white);
}

.content_post_quote-layout .pk-quote-card__person {
    display: flex;
    align-items: flex-start;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    margin-top: auto;
    padding-top: max(2rem, calc(2 * var(--su)));
}

.content_post_quote-layout .pk-quote-card__photo {
    width: max(3rem, calc(3 * var(--su)));
    height: max(3rem, calc(3 * var(--su)));
    border-radius: 999px;
    object-fit: cover;
}

.content_post_quote-layout .pk-quote-card__name {
    font-weight: 500;
    font-size: var(--desktop-body-xs);
    color: var(--ex-white);
    margin-bottom: 0.313rem;
}

.content_post_quote-layout .pk-quote-card__role {
    color: var(--ex-text-muted-light);
    font-size: var(--desktop-body-xs);
    margin: 0;
}

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

@media only screen and (max-width: 767px) {

	.content_post_quote-layout .pk-grid-container{
		gap: max(1.5rem, calc(1.5 * var(--su)));
	}

    .content_post_quote-layout .pk-card {
        order: 2;
    }

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

    .content_post_quote-layout .pk-card_title {
        font-size: var(--dekstop-body-sm);
    }

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

	.content_post_quote-layout .pk-quote-card__quote  {
		font-size: var(--dekstop-body-lg);
		margin: max(1.5rem, calc(1.5 * var(--su))) 0 0;
	}

    .content_post_quote-layout .pk-icon-small {
        top: max(-2rem, calc(-2 * var(--su)));
        right: max(-0.6rem, calc(-0.6 * var(--su)));
        width: max(1.25rem, calc(1.25 * var(--su)));
        height: max(1.25rem, calc(1.25 * var(--su)));
		padding: max(0.4rem, calc(0.4 * var(--su)));
    }

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


}