.hero-banner{
    background-image: url("../images/banner-bach.webp"); /* tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Capa oscura como en tu ejemplo */
.hero-banner::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.35) 70%,
        rgba(0,0,0,0.25) 100%
    );
}

.hero-banner .container{
    position:relative;
    z-index:2;
}

.hero-subtitle{
    font-size:28px;
    font-weight:500;
    letter-spacing:1px;
}

.hero-title{
    font-size:60px;
    font-weight:800;
    letter-spacing:2px;
}

.hero-line{
    width:280px;
    height:4px;
    background:#d40000;
    margin:15px auto;
}

/* Responsive */
@media (max-width:768px){

.hero-title{
    font-size:36px;
}

.hero-subtitle{
    font-size:20px;
}

.hero-banner{
    min-height:320px;
}

}