Выравнивание изображения по центру блока при уменьшение экрана

Нужно чтобы при уменьшение экрана картинка тоже уменьшалась, но оставалась по центру. Сейчас она начинает прижиматься к низу. На большом разрешение всё норм, по скринам видно что происходит.

      <section class="adidas">
        <div class="adidas__wrap">
          <div class="wrap__img"></div>
          <div class="wrap__content">
            <h2 class="content__title">Adidas</h2>
            <p class="content__description">
              Веб-сайт
            </p>
            <p class="content__description content__description-last">
              Разработка мобильного приложения для iOS, Android и Windows
            </p>
            <button class="content__button">Смотреть проект</button>
          </div>
        </div>
      </section>

.adidas {
  height: 862px;
}

.adidas__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
}

.wrap__img {
  background: url(public/img/monitor.png) no-repeat 100% 100%;
  background-size: contain;
  max-width: 800px;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  margin-right: 5%;
}