.lt-bg + .lt-bg.cnt.v2,
.dk-bg + .dk-bg.cnt.v2 {
    .hex-dcr {
      
        &.tp {
            top: -4.444rem;
            left: calc(-1 * (var(--cnt-v2-hx-s-clc) * .45));
        }
    }
}

.cnt.v2 {
    z-index: 1;
    --cnt-v2-hx-s: 268;
    --cnt-v2-hx-s-mbl:  16;
    --cnt-v2-hx-s-clc: calc((var(--cnt-v2-hx-s-mbl) * 1px) + (var(--cnt-v2-hx-s) - var(--cnt-v2-hx-s-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));
    
    .cnt-stl p {
        margin-bottom: 0 !important;
    }

    .hex-dcr {
        position: absolute;
        width: var(--cnt-v2-hx-s-clc);
        height: var(--cnt-v2-hx-s-clc);
        z-index: 0;
        pointer-events: none;
        color: var(--fnt-t-1);

        svg {
            font-size: var(--cnt-v2-hx-s-clc);
        }

        &.tp {
            top: var(--pd-v);
            left: calc(-1 * (var(--cnt-v2-hx-s-clc) * .45));
        }

        &.bt {
            bottom: calc(-0.5 * (var(--cnt-v2-hx-s-clc) * .45));
            right: calc(-1 * (var(--cnt-v2-hx-s-clc) * .45));
        }
    }

    .cnt-stl > h1 {
        margin-bottom: calc(var(--g-cnt-ttl-ttl-m) * 2);
    }

    .cnt-v2-srv {

        .srv-hdr {
            color: var(--fnt-t-co);
        }

        @media screen and (min-width:1280px) {
            & > div {
                padding: 1.78rem 2.22rem;
            }
        }
    }

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

            .ui-scroll {
                max-height: 14.8rem;
            }
        }

        /* Heading spans both columns; the rest of the copy stays in the left column.
           Guarded so any other content shape keeps the original flex row. */
        > .mn_wd.f_gp:has(> .half:first-child > .cnt-stl > h1:first-child) {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
            row-gap: 0;

            /* dissolve the text column so the heading becomes a grid item */
            > .half:first-child,
            > .half:first-child > .cnt-stl {
                display: contents;
            }

            > .half:first-child > .cnt-stl > h1:first-child {
                grid-column: 1 / -1;
            }

            > .half:first-child > .cnt-stl > :not(h1:first-child),
            > .half:first-child > :not(.cnt-stl) {
                grid-column: 1;
            }

            > .half:last-child {
                width: auto;
                grid-column: 2;
                grid-row: 2 / span 50;
            }

            /* A flair under the heading belongs to it, so the media column
               skips that row and starts level with the copy instead. */
            &:has(> .half:first-child > .cnt-stl > h1:first-child + .flr_hd) > .half:last-child {
                grid-row-start: 3;
            }
        }
    }
}