.flex-layout.content_image {
    --bg-color: var(--noix-off-almond);
    background-color: var(--bg-color);
	--layout-spacing: var(--pk-row-spacing);
    padding-block: var(--layout-spacing);
    padding-inline: var(--pk-site-gutter);
	position: relative;
}

.flex-layout.content_image .pk-grid-container {
    align-items: center;
}

.flex-layout.content_image .pk-grid-container:has(.logocarousel-wrapper) {
    align-items: start;
}

.flex-layout.content_image .image-col {
    padding-right: max(4rem, calc(6 * var(--su)));
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: max(1.5rem, calc(2 * var(--su)));
}

.flex-layout.content_image .image-col .image {
    width: 100%;
    height: auto;
    
    aspect-ratio: 1;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
    contain-intrinsic-size: unset;
}

.flex-layout.content_image .logocarousel-wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: max(1rem, calc(1 * var(--su)));
}

.flex-layout.content_image .logocarousel-wrapper .noix-subtitle {
    color: var(--noix-blue);
    font-size: var(--scaling-body-s);
}

.flex-layout.content_image.dark-bg .logo-carousel {
    --background-color: var(--noix-almond);
    --slider-bg: var(--noix-almond);
    --extra-bg: var(--noix-chestnut);
    --extra-color: var(--noix-almond);
}

.flex-layout.content_image .content-col {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.flex-layout.content_image .list-item-content {
    display: flex;
    flex-direction: column;
    gap: max(.25rem, calc(.25 * var(--su)));
}

.flex-layout.content_image .list-item-content .title {
    font-weight: 700;
}

.flex-layout.content_image .pk-grid-container.reversed .image-col {
    order: 2;
    padding-right: 0;
    padding-left: max(4rem, calc(6 * var(--su)));
}

.flex-layout.content_image .pk-grid-container.reversed .content-col {
    order: 1;
}

@media screen and (min-width: 993px) {

    .flex-layout.content_image .image-col .image {
        min-height: max(28rem, calc(28 * var(--su)));
    }

    .flex-layout.content_image .image-col:has(.logocarousel-wrapper) .image {
        flex: 1 1 auto;
        aspect-ratio: unset;
    }

}


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

    .flex-layout.content_image .image-col img {
        aspect-ratio: 1;
    }

    .flex-layout.content_image .pk-grid-container .content-col {
        order: 0 !important;
    }

    .flex-layout.content_image .image-col,
    .flex-layout.content_image .pk-grid-container.reversed .image-col {
        padding-right: 0;
        padding-left: 0;
    }

}