CSS: How do I make it so that the mix-blend-mode is not applied to child element?

If you use the mix-blend-mode, it automatically affects all child elements of the object in question. By using a pseudo element and the position, this problem can be solved.

.elementor-portfolio-item:hover .elementor-portfolio-item__overlay {
    position: relative;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.elementor-portfolio-item:hover .elementor-portfolio-item__overlay:before {
    background-color: #c0001f;
    mix-blend-mode: multiply;
    transition: .5s;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.elementor-portfolio-item__title {
    position: absolute;
    padding: 25px;
    z-index: 1;
    bottom: 0px;
}