/* Figure captions on this page carry .text-reset, which forces color:inherit
   and drops them to the theme's gray body text. Pin them to the brand navy so
   they read as dark blue per the design. page-id covers the DE original and its
   EN twin, so both languages are fixed. */
body.page-id-288138 .figure-caption {
    color: #0b1b45 !important;
}

/* Below the lg breakpoint the two-column sections stack, and the images end up
   off-centre in two ways:
     - The hero image column (col-lg-5) has no width there, so as a flex child it
       shrinks to the image width and wraps onto its own line, left-aligned.
     - The content-section image columns are full width, but the figure inside
       shrinks to the image width and left-aligns within the column.
   So on small screens centre the hero image column on its line, and centre every
   diagram figure (and its picture/img) across the page. Desktop side-by-side
   layout is untouched. */
@media (max-width: 991.98px) {
    body.page-id-288138 section.hero-product-section .hero-product-section__image {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.page-id-288138 figure.figure {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    body.page-id-288138 figure.figure picture,
    body.page-id-288138 figure.figure img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}