.flex-layout.hero_image-layout {
    position: relative;
    min-height: 100vh;
    padding-inline: 0;
    overflow: hidden;
    /* height: max(65.5rem, calc(65.5 * var(--su))); */
    height: calc(100vh + var(--pk-header-height));
}

.flex-layout.hero_image-layout .hero_image_bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

@media screen and (max-width: 1280px) {
    .flex-layout.hero_image-layout + .flex-layout.content_cols-layout {
        border-radius: 0;
    }

    .flex-layout.hero_image-layout {
        background-color: var(--color-black);
        height: fit-content;
    }

    .flex-layout.hero_image-layout .hero_image_bg {
        object-fit: contain;
        object-position: top;
    }
}

@media screen and (max-width: 992px) {
    .flex-layout.hero_image-layout {
        height: 660px;
        min-height: unset;
    }

    .flex-layout.hero_image-layout .hero_image_bg {
        object-fit: contain;
        object-position: top;
    }
}


@media screen and (max-width: 880px) {
    .flex-layout.hero_image-layout {
        height: 580px;
    }
}

@media screen and (max-width: 767px) {
    .flex-layout.hero_image-layout {
        height: 500px;
    }
}

@media screen and (max-width: 680px) {
    .flex-layout.hero_image-layout {
        height: 445px;
    }

    .flex-layout.hero_image-layout .hero_image_bg {
        aspect-ratio: 16/9;
    }
}

@media screen and (max-width: 610px) {
    .flex-layout.hero_image-layout {
        height: 405px;
    }
}

@media screen and (max-width: 540px) {
    .flex-layout.hero_image-layout {
        height: 358px;
    }
}

@media screen and (max-width: 456px) {
    .flex-layout.hero_image-layout {
        height: 300px;
    }
}

@media screen and (max-width: 400px) {
    .flex-layout.hero_image-layout {
        height: 260px;
    }
}