Как сделать полосу прокрутки с отступами для отдельной секции?

У меня есть секция шириной более 3000 px и основная часть контента находиться справа. Я хочу сделать для него собственную полосу прокрутки с вертикальными и горизонтальными отступами, как показано на картинке и в демо-версии на codepen. Задал padding для контейнера и вроде как все готово, только работает это не кроссбраузерно, на iPhone скроллбар вообще исчезает. Также края обрезаються из-за отступов, как это можно пофиксить?

Фото:

HTML:

<div class="first-section">First Section</div>  

<!-- Main Section -->
<section class="reviews">
    <h3 class="reviews__title">
      Title
    </h3>
    <div class="reviews__wrapper">
      <div class="reviews__inner">
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
      </div> 
      </div>
    </section>
<!-- Main Section -->

<div class="last-section">Footer</div>

CSS:

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

body {
  background: #f8f8f8;  
  font-family: 'Assistant', sans-serif;
}

/* Sections to simulate */
.first-section,
.last-section {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  background: #ccc;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.first-section {
  height: 450px;
}
.last-section {
  height: 480px;
  margin-top: 100px;
}

/* Horizontal Section */
.reviews {
  padding: 70px 0 100px;
}
.reviews__wrapper {
  display: flex;
  direction: ltr;
  position: relative;
  padding: 0 5vw;
}
.reviews__inner {
  width: 100%;
  height: 622px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 70px;

  display: flex;
  gap: 30px;
}
.reviews__inner::-webkit-scrollbar {
  height: 10px;          
  border-radius: 5px;  
  background: #e2e2e2;
}
.reviews__inner::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 5px;
}