.rd-slider {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--slider-gap, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 5px var(--mob-edge);
  margin: 0;
  @media (min-width: 768px) {
    padding: 5px var(--tab-edge);
  }
  @media (min-width: 1280px) {
    padding: 5px 0;
  }
}

.rd-slider__item {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 var(--slider-item-width, 315px);
  scroll-snap-align: center;
  @media (min-width: 1280px) {
    scroll-snap-align: start;
  }
  > * {
    height: 100%;
  }
}

.rd-slider__nav {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 16px;
}

.rd-slider__nav-btn {
  display: flex;
  width: 48px;
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
  &:focus {
    outline: none !important;
  }
  @media (hover: hover) {
    &:hover,
    &:focus-visible {
      & > svg > path {
        &:nth-child(1) {
          stroke: var(--color-black-txt);
        }
        &:nth-child(2) {
          stroke: var(--color-black-txt);
        }
      }
    }
  }
  &:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

.rd-slider__nav-btn_next {
  transform: rotate(180deg);
}

.rd-slider__nav-btn-icon {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  & > path {
    transition: stroke 0.3s ease;
  }
}