CSSで横スクロールのカードをぴったり止めるには

<div class="carousel" tabindex="0" role="region" aria-label="カードの一覧（横にスクロールできる）">
  <div class="slide">
    <span class="slide__title">カード 1</span>
    <span class="slide__text">横にスクロールすると、カードの左端がそろう位置で止まる。</span>
  </div>
  <div class="slide">
    <span class="slide__title">カード 2</span>
    <span class="slide__text">カードの途中の半端な位置では止まらない。</span>
  </div>
  <div class="slide">
    <span class="slide__title">カード 3</span>
    <span class="slide__text">右端に次のカードが少し見えている。</span>
  </div>
  <div class="slide">
    <span class="slide__title">カード 4</span>
    <span class="slide__text">止まったカードの左にも 16px の余白が残る。</span>
  </div>
  <div class="slide">
    <span class="slide__title">カード 5</span>
    <span class="slide__text">これが最後のカードになる。</span>
  </div>
</div>

/* 横に並べてはみ出させ、はみ出した分をスクロールさせる */
.carousel {
  display: flex;
  gap: 12px;
  max-width: 360px;
  overflow-x: auto;
  padding: 4px 16px 12px;
  /* 止まる位置を持たせるのはスクロールする側（親） */
  scroll-snap-type: x mandatory;
  /* padding と同じ値にして、止まったカードの左にも余白を残す */
  scroll-padding-inline: 16px;
}
 
.slide {
  /* 縮ませない。縮むと全部が枠に収まり、スクロールが起きない */
  flex: 0 0 75%;
  /* どこをそろえて止めるかは子に書く */
  scroll-snap-align: start;
  box-sizing: border-box;
  height: 110px;
  padding: 16px;
  border-radius: 12px;
  background: #ccfbf1;
  color: #134e4a;
}
 
.slide:nth-child(even) {
  background: #e0e7ff;
  color: #312e81;
}
 
.slide__title {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
 
.slide__text {
  font-size: 13px;
}