Как предотвратить наложение текста в контейнере на фоновое изображение?

У меня есть раздел героя, который воспроизводит видео в фоновом режиме, а поверх него находится изображение, которое содержит прозрачный текст вверху, создавая эффект, в котором вы можете видеть, как видео воспроизводится через буквы.

Мне нужно добавить дополнительный контент в этот раздел поверх фонового изображения, и я хочу убедиться, что контент никогда не перекрывает часть фонового изображения, содержащего текст, независимо от размера экрана.

Как мне это сделать с помощью CSS / SASS?

Вот код, который у меня есть (я еще не добавил дополнительный контент в раздел):

HTML / Twig:

{% set backgroundVideo = block.backgroundVideo.one %}
{% set backgroundImage = block.coverImage.one %}
<section class = "hero" style = "background-image: url('{{ backgroundImage.getUrl }}')">
  <div class = "row">
    <div class = "col-xs-12">
      <video playsinline autoplay muted loop class = "hero__bg-video">
        <source src = "{{ backgroundVideo.getUrl }}" type = "video/mp4">
      </video>
    </div>
  </div>
</section>

SASS:

.hero {
  height: 700px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  &__bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
}