.module-message-panel {
    
}

.module-message-panel .inner-wrapper {
    width:100%;
    display:flex;
    flex-direction: column;
    gap:2rem;
    position: relative;
}

.module-message-panel img {
    object-fit: cover;
    width:100%;
}

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

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

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

.module-message-panel .overlay-outer {
    padding:3rem;
}

.module-message-panel h4.qualifier,
.module-message-panel h4.subhead
{
    text-transform: uppercase;
    font-size:1.7rem;
    line-height:2.5rem;
    font-weight: 700;
}

.module-message-panel .copy {
    font-size:2rem;
    line-height:2.8rem;
    margin-top:1rem;
    color:var(--dark-gray);
}

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

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

.module-message-panel.mcs-gray .inner-wrapper {
    background: var(--light-gray);
}   

@media (min-width:1200px) {
    .module-message-panel .inner-wrapper {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:0;
    }

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

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

    .module-message-panel .overlay-outer {
        padding:5rem;
    }

    .module-message-panel:not(.text-right) .image-wrapper {
        order:1;
    }

    .module-message-panel:not(.text-right) .overlay-outer {
        order:0;
    }
    
    .module-message-panel img {
        width: 100%;
        height: 100%;
    }
    
    .module-message-panel .overlay-outer {
        display: flex; /* Use flexbox to ensure alignment */
        align-items: center; /* Vertically center the overlay */
    }

    .module-message-panel .image-wrapper:before {
        content: '';
        position: absolute;
        height: 50%;
        top: 25%;
        width: 20px;
        background-color: var(--light-orange);
        left: calc(100% - 20px);
    }
    
    .module-message-panel .image-wrapper:after {
        content: '';
        position: absolute;
        height: 50%;
        top: 25%;
        width: 20px;
        background-color: var(--dark-orange);
        left: calc(100%);
    }

    .module-message-panel.text-right .image-wrapper:before {
        left: 0px;
    }
    
    .module-message-panel.text-right .image-wrapper:after {
        left: -20px;
    }
}