Фоновое изображение и радиальный градиент на отзывчивом элементе?

Это изображение используется:

Это моя реализация с использованием Vue.js, Bootstrap и CSS:

Шаблон

<div class = "landing">
  <div class = "container text-white details h-100">
    <div class = "row h-100">
      <div class = "col-12 col-md-7 my-auto">
        <h1 class = "text-left mb-0 font-weight-900 font-48">
          About the Alien Zoo experience
        </h1>
        <p class = "text-left mb-0 font-16">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum
        </p>
        <CustomButton
          class = "d-block"
          buttonText = "Next"
          @click.native = "onButtonClick()"
          ></CustomButton>
      </div>
    </div>
  </div>
  <div class = "row hero-image">
    <img class = "background" src = "../assets/images/Alien.png" alt = "" />
  </div>
</div>

СКСС

.landing {
  position: relative;
  height: 100vh; // background-color: #151515;
  overflow-x: hidden;
  .hero-image {
    position: relative;
    left: 28%;
    width: 100%;
    size: cover;
  }
  .hero-image:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30vh;
    height: 100vh;
    background: linear-gradient( 93deg, rgba(21, 21, 21, 1) 10%, rgba(0, 0, 0, 0) 50%);
    /* W3C */
  }
  p {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .details {
    position: absolute;
    z-index: 2;
    padding-left: 12%;
  }
  .background {
    display: block;
    height: 100vh;
    width: 100vw;
  }
}
.mobile-alien {
  display: none;
}
@media only screen and (max-width: 768px) {
  .landing {
    display: none;
  }
  .mobile-alien {
    display: block;
  }
}
@media only screen and (min-width: 1900px) {
  .landing .details {
    right: 50%;
  }
}

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

Само изображение, которое я использую, не имеет градиента. Поэтому я применил линейный градиент с помощью css. Но я думаю, что здесь я должен использовать радиальный градиент, так как углы изображений также должны стать черными (этот вид черного # 151515). У меня нет опыта работы с градиентами, все, что я пробовал с радиальным, не сработало. Используя вышеприведенный css, я смог достичь приличной степени, но это не похоже на то, что это самое лучшее.

Цвет фона страницы — #151515, и, как вы можете видеть, я должен сгладить его влево с помощью градиента.

Любая помощь будет оценена по достоинству. Спасибо.