/* Mobile First View  */

.main_image_container {
    position: relative;
    width: 100%;
    height: 50vh;
}
/* THE MAIN IMAGE DARK BLUR EFFECT ON HOVER */
#main_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: filter 0.5s ease-in;
}
/* specs for the text overlaying main image */
.overlay_text {
    position: absolute; /* keeps text center */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    color: var(--off-white);
    font-size: 28px;
    /* text-align: center; */
    /* justify-content: center; */
    opacity: 0;
    transition: opacity 1s ease-in;
}
.main_image_container:hover .overlay_text {
    opacity: 1;
}
#main_image:hover {
    filter: blur(20px) opacity(0.3) brightness(0.5);
}

/* MEDIA BREAKS */

@media only screen and (min-width: 768px) {
    .overlay_text {
        font-size: 40px;          
    }
}