/**
 * Bild mit überlagertem Textkasten (image-with-banner Box-Variante).
 * Wird per AssetCollector vom Content Block geladen.
 */

.image-with-banner {
    position: relative;
}

.image-with-banner .image-wrapper {
    margin: 0;
}

.image-with-banner .image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.image-with-banner .text-container-wrapper {
    position: absolute;
    top: 15%;
    right: 4%;
    width: 44%;
}

.image-with-banner .text-container {
    padding: 30px 25px;
    border-top: 7px solid #eb6e00;
    color: #fff;
    background-color: #112f6a;
}

.image-with-banner .text-container h1,
.image-with-banner .text-container h2,
.image-with-banner .text-container h3,
.image-with-banner .text-container h4,
.image-with-banner .text-container h5,
.image-with-banner .text-container h6 {
    margin-top: 0;
    color: inherit;
}

.image-with-banner .image-with-box-subheader {
    margin: 0.5rem 0 0;
    opacity: 0.95;
}

.image-with-banner .image-with-box-body {
    margin-top: 0.75rem;
}

.image-with-banner .image-with-box-body > :first-child {
    margin-top: 0;
}

.image-with-banner .image-with-box-body > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .image-with-banner .text-container-wrapper {
        position: relative;
        width: 100%;
        top: -1rem;
        right: unset;
    }
}