Как прописать стили для маски css, чтобы изображение отображалось сверху?

Question

I_want_to_know @I_want_to_know

CSS

Как прописать стили для маски css, чтобы изображение отображалось сверху?

Как прописать стили для маски с именем "hero-mask.png", чтобы изображение выводилось в верхней части, а нижняя часть была темной?

Подробнее на примерах:

Маска, которую пытаюсь применить

Пытаюсь сделать так (моя задумка)

На выходе имею только так

В текущем состоянии, маска отрабатывает с точностью до наоборот от моей задумки, и не понимаю, как отобразить изображение в верхней части?

SCSS

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  &__title,
  &__subtitle {
    z-index: 2;
    position: relative;
    text-align: center;
  }

  h1.hero__title,
  .hero__subtitle {
    z-index: 5;
    color: #fff;
  }

  .hero__subtitle {
    font-size: calc(15px + 10 * (100vw - 320px) / 1600);
  }

  .container-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
  }

  .mask-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/wp-content/themes/assets/img/hero-mask.png') no-repeat center;
    background-size: cover;
    z-index: 1;
  }

  .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
}

HTML

<section class="hero">
  <div class="container container-info">
      <h1 class="hero__title">Title</h1>
      <p class="hero__subtitle">
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Они запятых сбить над домах, свой проектах страна ведущими страну на берегу свою предложения путь ручеек его ему даже речью коварных?
      </p>
  </div>

  <div class="mask-hero"></div>
  <div class="video" style="opacity: 0.9; visibility: inherit">
          <video class="background-video" autoplay="" muted="" loop="">
            <source src="./../../../../video/hero.mp4" type="video/mp4" />
      </video>
      </div>
</section>