.mImageFeaturediv {
    display: flex;
    max-width: 100%;
	overflow: hidden;
}

.mImageFeatureColor_lightblue {
	background-color: #C8E8F0 !important;
    color: #000000;
}

.mImageFeatureColor_charcoal {
	background-color: #232c2b !important;
    color: #fff;
}
.mImageFeatureColor_darkblue {
	background-color: #002d5a !important;
    color: #ffffff;
}
.mImageFeatureColor_black {
	background-color: #000 !important;
    color: #ffffff;
}
.mImageFeatureColor_white {
	background-color: #fff;
    color: #000000;
}
.mImageFeature_container {
	display: flex;
	flex-direction: row;
    height: auto;
    margin: 20px 0 60px 0;

    H3 {
        font-weight: 900;
        line-height: 36px;
        letter-spacing: 0.5px;
        text-align: left;
        margin-top: 0;
    }
    .mImageFeature_image_container {
        overflow: hidden;
        width: 100%;
        height: auto;
        margin: 60px;
        aspect-ratio: 1/1;
        min-height: 330px;    
        min-width: 330px;
    }
    .mImageFeature_imageLeft_container:hover .mImageFeature_imageLeft_image {
        transform: scale(1.05);
    }
    .mImageFeature_imageLeft_container:hover .mImageFeature_text p {
        text-decoration: underline;
    }
    .mImageFeature_imageLeft_container:hover .mImageFeature_text p:after {
        text-decoration: none !important;
    }
    .mImageFeature_imageRight_container:hover .mImageFeature_imageRight_image {
        transform: scale(1.05);
    }
    .mImageFeature_imageRight_container:hover .mImageFeature_text p {
        text-decoration: underline;
    }

    .mImageFeature_imageRight_container:hover .mImageFeature_text p:after {
        text-decoration: none !important;
    }
    /* black-to-white gradients from top down 40% and bottom up 40% */
    .mImageFeature_image_container:after {
        z-index: 0; /* Lower than text content */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.6) 10%, 
            rgba(0, 0, 0, 0) 30%, 
            rgba(0, 0, 0, 0) 70%, 
            rgba(0, 0, 0, 0.6) 90%);
    }
    .mImageFeature_image_content {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 30px;

        .mImageFeature_text {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
            padding: 30px 40px 0 40px;
            border-radius: 0 0 20px 20px;
            background: linear-gradient(to top,
            rgba(0, 0, 0, 0.6) 75%,
            rgba(0, 0, 0, 0.5) 90%,
            rgba(0, 0, 0, 0.05) 100%
            );
        }
    }
}
.mImageFeature_image_container {
    height: 100%;
    border-radius: 20px;
    position: relative;
    background-size: cover;
    background-position: center;       
    transition: background-size 2s background-position 2s ease-in-out;

    H3 {
        color: #fff !important;
    }
    .mImageFeature_text p {
        font-size: 20px;
        font-weight: 400;
        color: #fff !important;
    }
    .mImageFeature_text p:after {
		font-family: "Material Symbols Outlined";
		direction: ltr;
		font-size: calc(20px + 4*(100vw - 375px) / 1305);
		font-weight: 400!important;
		content: 'east';
		vertical-align: middle;
		margin-left: 10px;
		line-height: 1;
        text-decoration: none !important;
	}
    a {
        text-decoration: none;
    }
}

/* on hover, zoom the background image */
.mImageFeature_image_container:hover {
    background-size: 110%;
}

.mImageFeature_center {
    /* should be single column, centered in flex container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .mImageFeature_image_container {
        width: 50% !important;
        height: 100%;
    }
}

.mImageFeature_image_content_mobile {
    display: none;
}
@media (max-width: 1295px) {
    .mImageFeature_image_content {
        padding: 20px !important;
    }
    .mImageFeature_imageLeft_container {
        margin-right: 5vw !important;
    }
    .mImageFeature_imageRight_container {
        margin-left: vw !important;
    }
    .mImageFeature_text {
        bottom: 0 !important;
        padding: 35px 20px 10px 20px !important;
        border-radius: 0 0 20px 20px;
        width: 100%;
        background: linear-gradient(to top,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, .2) 90%,
        rgba(0, 0, 0, 0.05) 100%
        );
    }

}
@media (max-width: 1000px) {


    /* switch to single column layout */
    .mImageFeature_container {
        flex-direction: column;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .mImageFeature_image_container {
            width: 90% !important;
            margin: 20px !important;
        }

        .mImageFeature_imageLeft_container {
            margin: 20px !important;
        }
        .mImageFeature_imageRight_container {
            margin: 20px !important;
        }

        .mImageFeature_image_container:after {
            /* very deep gradient */
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.6) 20%,
                rgba(0, 0, 0, 0.1) 30%,
                rgba(0, 0, 0, 0.1) 80%,
                rgba(0, 0, 0, 0.6) 90%
            ) !important;
 
    
        }        
    }
}
@media (max-width: 550px) {
    .mImageFeature_image_container H3 {
        font-size: calc(21px + 4 * (100vw - 375px) / 1305);

    }
    
}