.slider { position: relative; }

.slider__viewport { margin-top: calc(-1 * var(--sp-2)); }

.slider__track {
  display: grid;
  gap: var(--sp-4);
}

.slider.is-ready .slider__track { gap: 0; }

.slider .slider__slide {
  display: flex;
  height: auto;
  padding-top: var(--sp-2);
}

.slider.is-ready .slider__slide { width: var(--slide-w); }

.slider--categories { --slide-w: 200px; }
.slider--projects   { --slide-w: 280px; }
.slider--works      { --slide-w: 220px; }
.slider--events     { --slide-w: 270px; }

.slider--categories .slider__track { grid-template-columns: repeat(var(--slides, 7), 1fr); }
.slider--projects .slider__track   { grid-template-columns: repeat(5, 1fr); }
.slider--works .slider__track      { grid-template-columns: repeat(5, 1fr); }
.slider--events .slider__track     { grid-template-columns: repeat(5, 1fr); }

@media (min-width: 1281px) {
  .slider--categories.is-ready .slider__slide { width: calc((100% - (var(--slides, 7) - 1) * var(--sp-4)) / var(--slides, 7)); }
  .slider--projects.is-ready .slider__slide   { width: calc((100% - 4 * var(--sp-4)) / 5); }
  .slider--works.is-ready .slider__slide      { width: calc((100% - 4 * var(--sp-4)) / 5); }
  .slider--events.is-ready .slider__slide     { width: calc((100% - 4 * var(--sp-4)) / 5); }
}

@media (max-width: 1440px) {
  .slider.is-ready .slider__viewport {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
}

.slider__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-image: var(--grad-card), var(--grad-card-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--c-text);
  transform: translateY(-50%);
  transition: background-image 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}

.slider.is-ready .slider__nav { display: flex; }

.slider__nav:hover {
  background-image: var(--grad-card), var(--grad-card-edge-hover);
  color: var(--c-accent);
}

.slider__nav--prev { left: calc(-1 * var(--sp-2)); }
.slider__nav--next { right: calc(-1 * var(--sp-2)); }

.slider__nav--prev svg { transform: scaleX(-1); }

.slider__nav--disabled {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1280px) {
  .slider:not(.is-ready) .slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-strong) transparent;

    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--sp-3);
  }

  .slider:not(.is-ready) .slider__slide {
    flex: 0 0 var(--slide-w);
    scroll-snap-align: start;
  }

  .slider:not(.is-ready) .slider__track::-webkit-scrollbar { height: 6px; }
  .slider:not(.is-ready) .slider__track::-webkit-scrollbar-thumb {
    background-color: var(--c-line-strong);
    border-radius: 3px;
  }
}