.module-rich-message-panel {
    padding-bottom:25px; /* to account for the offset overlay */
    display:flex;
    flex-direction: column;
}

.module-rich-message-panel img {
    width: 100%;
    height: 100%;
}

.module-rich-message-panel .image-wrapper {
    display:flex;
}

.module-rich-message-panel img.desktop {
    display:none;
}

.module-rich-message-panel .overlay {
    background-color: var(--dark-orange);
    padding: 2rem;
    border-bottom: 25px solid var(--light-orange);
}

.module-rich-message-panel .overlay .headline strong {
    color:unset;
}

.module-rich-message-panel h1,
.module-rich-message-panel h2,
.module-rich-message-panel h3,
.module-rich-message-panel h4,
.module-rich-message-panel h5,
.module-rich-message-panel h6 {
    margin:0;
    color:#fff;
}

.module-rich-message-panel .subhead {
    text-transform: uppercase;
    font-size:1.9rem;
    line-height: 2.6rem;
    font-weight: 700;
    color:#fff;
}

.module-rich-message-panel .copy {
    font-size:2rem;
    line-height:2.8rem;
    margin-top:1rem;
    color:#000;
}

.module-rich-message-panel .buttons {
    display: flex;
    gap:1rem;
    flex-wrap: wrap;
    margin-top:2rem;
}

.module-rich-message-panel .buttons .button {
    white-space: nowrap;
}

@media (min-width:1200px) {
    .module-rich-message-panel {
        display:block;
    }

    .module-rich-message-panel img.mobile {
        display:none;
    }
    .module-rich-message-panel img.desktop {
        display:block;
    }

    .module-rich-message-panel {
        position: relative;
        padding-bottom:25px; /* to account for the offset overlay */
        max-height:600px;
        overflow:hidden;
    }
    
    .module-rich-message-panel .image-wrapper {
        max-height: 550px; /* Adjust as needed */
        overflow: hidden;
    }
    
    .module-rich-message-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image scales proportionally */
        position: relative;
        max-height: 550px;
    }
    
    .module-rich-message-panel .overlay-outer {
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
        width: 100%;
        height: 100%; /* Explicitly inherit parent's height */
        display: flex; /* Use flexbox to ensure alignment */
        align-items: center; /* Vertically center the overlay */
    }
    
    .module-rich-message-panel .overlay {
        position: absolute;
        width: 45%;
        left:0;
        bottom:-25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 6rem;
        gap: 1rem;
    }

    .module-rich-message-panel.text-right .overlay {
        left:50%;
    }
}