change the opacity of background image and appear text on it more visible with the following css code.

Note: to bring the text on the front . I used Position:relative and then z-index.

.hero {
     height: 450px;
     background-image: url(../img/hero.jpg);
     position: relative;

     display: flex;
     align-items: center;
     justify-content: center;
}

.hero::after {
     content: '';
     background-color: rgba(0,0,0, .7);
     display: block;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     position: absolute;
}

.hero-content {
     color: var(--white);
     position: relative;
     z-index: 1;
     text-align: center;
}