Как поместить стрелки навигации внутри контейнера с картинкой fancybox?
 

Есть группа картинок галереи fancybox 3 версии.

Как расположить стрелки влево вправо внутри белой секции (а не по краям как сейчас), по аналогии как в предыдущей версии библиотеки демо но, сохранив при этом адаптивность.

Если есть вариант создать белые отступы от картинки так, чтобы при раскрытии картинки не наблюдалось эффекта дергания - будет вообще здорово!

Код: https://jsfiddle.net/zycw68r4/

$('[data-fancybox="gallery"]').fancybox({
  btnTpl: {

    arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left prev" title="{{PREV}}">' +
      '<i class="fa fa-angle-left" aria-hidden="true"></i>' +
      "</button>",

    arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right next" title="{{NEXT}}">' +
      '<i class="fa fa-angle-right" aria-hidden="true"></i>' +
      "</button>"

  }

});

<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg"></a>

.fancybox-container .fancybox-image {
  padding: 80px;
  background: #fff;
  border-radius: 20px;
}

.fancybox-container .fancybox-navigation .fancybox-button.prev,
.fancybox-container .fancybox-navigation .fancybox-button.next {
  width: 69px;
  height: 69px;
  font-size: 35px;
  border-radius: 50%;
  border: none;
  background-color: #fe7f40;
  color: white;
  cursor: pointer;
  padding: 0;
}

Решил вот так