  .carousel-wrapper {
    width: 100%;
    position: relative;
  }
  .carousel-wrapper::before,
  .carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
  }
  .carousel-wrapper::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
  .carousel-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

  .carousel-track {
    overflow: hidden;
    cursor: grab;
    padding: 16px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .carousel-track.dragging { cursor: grabbing; }

  /*
   * margin-right on each card (not flex gap) so that
   * unitWidth = N x (cardWidth + margin) — perfectly exact.
   */
  .carousel-strip {
    display: flex;
    width: max-content;
    will-change: transform;
  }