Как поднять блок div на слайдер (проблема с вёрсткой)

html

        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide" style="background-image:url(/img/hero-one.png); border-radius: 32px;">
          </div>
          <div class="swiper-slide"  style="background-image:url(/img/hero-two.png); border-radius: 32px;"></div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="container hero-container">
        <div class="banner-container">
          <div class="banner">
            <p class="banner__title">Проектные решению любой сложности</p>
            <p class="banner__discription">Есть над чем задуматься: базовые сценарии поведения пользователей и по сей день остаются уделом проектантов</p>
            <button class="banner__btn btn"> Заказать расчёт </button>
          </div>
        </div>
      </div>

css

/* Section Hero */

.section-hero {
  margin-bottom: 50px;
}

.swiper-container {
  height: 620px;
}
.swiper-slide {
  background-size: cover;
}

.hero-container {
  height: 620px;
  display: flex;
  color: var(--white);
}

.banner-container {
  display: flex;
  flex: 1 1 auto;
}

.banner {
  width: 837px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 80px;
}

.banner__title {
  margin-bottom: 24px;
  font-family: 'Most';
  font-weight: 800;
  font-size: 70px;
  line-height: 85px;
}

.banner__discription {
  width: 837px;
  margin-bottom: 90px;
  font-weight: 700;
  font-size: 24px;
}

.banner__btn {
  padding: 20px 38px;
}

Должно быть как-то так.

Есть слайдер, который подключается через JS и есть блок, который должен отображаться поверх этого слайдера. Другими словами, меняется только картинка, а текст(сам блок с кнопкой и тд.) остается прежним.

Через позиционирование тоже почему-то не получилось. Слайдер становится поверх текста, а не наоборот.