.image-bg-callout {
    position: relative;
}

.image-bg-callout .content-pane,
.image-bg-callout .DNNModuleContent {
    width: 100%;
    height: 100%;
}

.image-bg-callout .Normal,
.image-bg-callout .Normal h3 {
    width: 100%;
    height: 100%;
}

.image-bg-callout .Normal h3 {
    display: flex;
    align-items: flex-end;
}

.image-bg-callout .Normal {
    a, a:link {
        color: #fff;
    }

    a:hover {
        text-decoration: none;
    }
}

.image-bg-callout .Normal a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Callout modules share a grid; a lone callout spans the full row. */
.mod-pane:has(> .DnnModule > .image-bg-callout) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

/* Let grid items shrink below their content's intrinsic width. */
.mod-pane:has(> .DnnModule > .image-bg-callout) > .DnnModule {
    min-width: 0;
}

.image-bg-callout,
.image-bg-callout .content-pane,
.image-bg-callout .DNNModuleContent,
.image-bg-callout .Normal,
.image-bg-callout .Normal h3 {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* Other modules, such as the heading, retain the full row */
.mod-pane > .DnnModule:not(:has(.image-bg-callout)) {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .mod-pane:has(> .DnnModule > .image-bg-callout) {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Count only direct module children containing this container. */
.mod-pane > .DnnModule:nth-child(1 of :has(> .image-bg-callout)):nth-last-child(1 of :has(> .image-bg-callout)) {
    grid-column: 1 / -1;
}