Как сделать кнопки для слайдера, чтобы вместе с изменение ширины экрана (резиновая верстка) сжимались и кнопки?

Question

[Lion97icvc]

Есть слайдер, к нему есть кнопки "вперед" и "назад". Верстаю адаптив (резиновый), при уменьшении экрана страница сжимается, а кнопки нет. Позиция кнопок задана с помощью свойств right и left. Пробовала их задавать в %, это не помогает, страница ломается, кнопки не двигаются. Первый брекпоинт на 1024, кнопки ломают все на 1200.

<div class="swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide about__card">
           <img src="img/about1.png" class="about__slider-img img" alt="Дмитрий Гутенберг">
               <h3 class="about__author text">
                  Дмитрий Гутенберг
               </h3>
                <p class="about__text text">
                    Эксперт (ну, почти) по всем вопросам (почти)
                </p>
         </div>
         <div class="swiper-slide about__card">
              <img src="img/about2.png" class="about__slider-img img" alt="Анна Васильева">
               <h3 class="about__author text">
                    Анна Васильева
                </h3>
                <p class="about__text text">
                   Как я здесь оказалась? А главное — зачем?
                </p>
           </div>
        </div>
        <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

Comments

[Lion97icvc]

Evgenii, float нет.

.swiper1 {
  max-width: 1136px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.about__card {
  margin-bottom: 30px;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: 28%;
  width: 42px;
  height: 42px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
 justify-content: center;
  color: transparent;
  transition: background-image .3s ease-in-out;
}

.swiper-button-next {
  background-image: url('../img/ab_arrow_next.svg');
}

.swiper-button-prev {
  background-image: url('../img/ab_arrow.svg');
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: -7%;
  right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: -7%;
  left: auto;
}

[Lion97icvc]

Evgenii ,
Я понимаю, что в этом проблема. Но не знаю как ее решить, поэтому и обратилась за помощью.

[Lion97icvc]

Evgenii, pnevmokod.ru
Есть такой вариант "песочницы"

[Lion97icvc]

Evgenii, благодарю за помощь