Сделайте части изображения перекрывающимися на планшете/рабочем столе, но не на мобильном телефоне

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

Я попытался добавить «margin-top: -226px» к изображению, когда минимальная ширина составляет 768 пикселей (но опять же, он перекрывает текст в разделе first/hero).

<!-- #HERO -->  

  <div class = "hero-bg center-text">
    <div class = "center-container">
      <h2 class = "join">
        <span class = "join-the">Join The</span>
        <img class = "shelf-squad-logo" src = "https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-self-squad.svg">
      </h2>
      <h1 class = "rate-read-rewards">
        <img class = "read-rate-rewards-logo" src = "https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-read-rate-review.svg">
      </h1>
      <p class = "enter-for-a-chance">Enter for a chance to win a Shelf Squad Summer Reading prize pack!</p>
      <p class = "read-or-listen-to-excerpt">
        Read or listen to an excerpt of any book below and submit a review for a chance to win. Not able to read or listen? Visit the official rules here on how to send in a write-in entry.
      </p>
    </div>
  </div>

<!-- #PRIZES -->

  <div class = "prize-bg center-text">
    <div class = "center-container">
      <img class = "prize-pack" src = "https://storage.googleapis.com/shelfstuff-staging/uploads/2019/05/210d080f-thumbnail-1.jpg">
      <p class = "grand-prize">Grand Prize</p>
      <h2 class = "grand-prize-desc">One grand prize winner every two weeks will receive a Shelf Squad prize pack including:</h2>
      <ul>
        <li class = "prize-bullet">A set of amazing FREE books</li>
        <li class = "prize-bullet">1 Shelf Stuff tote bag</li>
        <li class = "prize-bullet">1 $50 gift card</li>
        <li class = "prize-bullet">1 Shelf Stuff pin</li>
        <li class = "prize-bullet">1 Shelf Stuff activity book</li>
      </ul>
    </div>
  </div>

/*------------------------------------*\
  #UNIVERSAL
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center-container {
  max-width: 1220px;
  padding: 40px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  color: white;
  margin-top: 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  list-style: none;
  text-align: left;
}

li {
  padding-left: 18px;
}


/*------------------------------------*\
  #HERO
\*------------------------------------*/

.hero-bg {
  background: blue;
}

.join-the {
  color: white;
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  display: block;
}

.read-rate-rewards-logo {
  margin: 45px auto 40px auto;
}

.enter-for-a-chance {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  margin: 14px 0;
}

.read-or-listen-to-excerpt {
  color: white;
  font-weight: 700;
  font-size: 20px;
  line-height: 31px;
  max-width: 632px;
  margin: 1em auto;
}

/*------------------------------------*\
  #PRIZES
\*------------------------------------*/

.prize-bg {
  background: orange;
}

.grand-prize {
  color: var(--purple-color);
  text-transform: uppercase;
  margin: 33px auto;
  font-weight: 900;
  font-size: 24px;
}

.grand-prize-desc {
  color: white;
  font-weight: 700;
  font-size: 36px;
  line-height: 55px;
}


/*------------------------------------*\
  #UTILITY
\*------------------------------------*/

.center-text {
  text-align: center;
}

/*------------------------------------*\
  #RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width: 768px) {
  .container {
    max-width: 1300px;
  }

  .prize-pack {
    margin-top: -226px;
  }
}

На планшете/рабочем столе я хотел бы, чтобы в первом разделе было достаточно места, чтобы поместиться половина изображения. Половина изображения должна быть в герое, а половина в разделе призов.

вот как я хочу, чтобы это выглядело