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

.content_tiles-layout .pk-content_wrap .pk-heading {
    color: var(--ex-grey-blue);
}

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

.content_tiles-layout .pk-content_wrap .pk-button-group {
    margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

/* Tiles (rechterkant) */
.content_tiles-layout .pk-tiles {
    --tile-gap: max(1.5rem, calc(1.5 * var(--su)));
    display: flex;
    flex-wrap: wrap;
    gap: max(1rem, calc(1 * var(--su)));
}

/* Exactly 4 tiles (e.g. 3 posts + the fixed contact tile): 2x2 grid
   instead of an uneven row of 3 + 1 leftover. */
.content_tiles-layout .pk-tiles_2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.content_tiles-layout .pk-tile {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 calc((100% - 2 * var(--tile-gap)) / 3);
    padding: max(1.5rem, calc(1.5 * var(--su)));
    border: 1px solid var(--ex-grey-blue-10);
    border-radius: max(1rem, calc(1 * var(--su)));
    background: var(--ex-white);
    color: var(--ex-grey-blue);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.3s ease-in-out;
}

.content_tiles-layout .pk-tile:not(.pk-tile-contact):hover {
	background:#fff6f5;;
}

/* Exactly 4 tiles (e.g. 3 posts + the fixed contact tile): 2x2 grid
   instead of an uneven row of 3 + 1 leftover. */
.content_tiles-layout .pk-tiles_2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.content_tiles-layout .pk-tiles_2col .pk-tile {
    flex: unset;
}

.content_tiles-layout .pk-tile-contact {
    background: var(--ex-grey-blue);
    border-color: var(--ex-grey-blue);
    color: var(--ex-white);
}

.content_tiles-layout .pk-tile-contact:hover {
	background: rgba(var(--ex-grey-blue-rgb), 0.9);
}

.content_tiles-layout .pk-tile_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
    width: max(2rem, calc(2 * var(--su)));
    height: max(2rem, calc(2 * var(--su)));
    border-radius: 999px;
    border: 1px solid #ff968d;
    background: var(--ex-red);
}

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

.content_tiles-layout .pk-tile:hover .pk-tile_icon::before{
	transform: rotate(-45deg);
}

.content_tiles-layout .pk-tile_title {
    font-family: var(--pk-text-font-family);
    font-size: var(--desktop-body-sm);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.content_tiles-layout .pk-tile-contact .pk-tile_title {
    color: var(--ex-white);
}

.content_tiles-layout .pk-tile_text {
    margin: 0;
    font-size: var(--desktop-body-xs);
    line-height: 1.5;
    color: rgba(var(--ex-grey-blue-rgb), 0.8);
}

.content_tiles-layout .pk-tile-contact .pk-tile_text {
    color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 992px) {
   .content_tiles-layout .pk-content_wrap {
        padding-right: max(3rem, calc(4 * var(--su)));
    }
}

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

    .content_tiles-layout .pk-tiles .pk-tile {
        flex-basis: calc((100% - var(--tile-gap)) / 2);
    }
}

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

    .content_tiles-layout .pk-tiles {
        gap: max(0.5rem, calc(0.5 * var(--su)));
    }

    .content_tiles-layout .pk-tile {
        border-radius: max(0.5rem, calc(0.5 * var(--su)));
    }

    .content_tiles-layout .pk-tile_icon {
        margin-bottom: max(1rem, calc(1 * var(--su)));
        width: max(1.5rem, calc(1.5 * var(--su)));
        height: max(1.5rem, calc(1.5 * var(--su)));
    }

    .content_tiles-layout .pk-tile_icon::before {
        font-family: "Material Symbols Outlined";
        content: "\e5c8";
        font-size: max(0.8rem, calc(0.8 * var(--su)));
        line-height: 0;
    }
}

@media only screen and (max-width: 600px) {
    .content_tiles-layout .pk-tiles .pk-tile {
        flex-basis: 100%;
    }
}