.catalog-top-slider {
  --catalog-top-visible: 4;
  --catalog-top-peek: 0.15;
  --catalog-top-gap: 20px;
  width: 100%;
  margin-bottom: 40px;
}

.catalog-top-slider__viewport {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.catalog-top-slider__viewport.is-grabbing {
  cursor: grabbing;
}

.catalog-top-slider__track {
  display: flex;
  gap: var(--catalog-top-gap);
  will-change: transform;
}

.catalog-top-slider .catalog-item-slide.catalog-item {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc((100% - var(--catalog-top-visible) * var(--catalog-top-gap)) / (var(--catalog-top-visible) + var(--catalog-top-peek)));
  max-width: none;
  margin-bottom: 0;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: pan-y;
}

.catalog-top-slider .catalog-item-slide img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.catalog-top-slider.is-static .catalog-top-slider__viewport {
  overflow: visible;
  cursor: default;
}

.catalog-top-slider.is-static .catalog-item-slide.catalog-item {
  width: calc((100% - 3 * var(--catalog-top-gap)) / 4);
}

@media (max-width: 992px) {
  .catalog-top-slider {
    --catalog-top-visible: 2;
    --catalog-top-gap: 15px;
  }

  .catalog-top-slider.is-static .catalog-item-slide.catalog-item {
    width: calc((100% - var(--catalog-top-gap)) / 2);
  }
}

@media (max-width: 480px) {
  .catalog-top-slider {
    --catalog-top-visible: 1;
    --catalog-top-gap: 10px;
  }
}