.image-slider {
  .image-slider__title {
    margin: 0 0 1rem;
  }

  .image-slider__wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
  }

  .image-slider__nav {
    appearance: none;
    border: 1px solid currentColor;
    background: transparent;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    line-height: 1;
  }

  .image-slider__track {
    --gap: 0.75rem;
    --spv: 3;

    overflow: hidden; /* changed: viewport, not native scroll */
    position: relative;
  }

  .image-slider__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - ((var(--spv) - 1) * var(--gap))) / var(--spv));
    gap: var(--gap);
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  .image-slider__slide {
    min-width: 0;
  }

  .image-slider__media {
    width: 100%;
  }

  .image-slider__slide img,
  .image-slider__video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}