.slider {
  position: relative;
  margin-inline: 6rem;
}
.slider__list {
  container-type: inline-size;
  container-name: slider;
  scroll-behavior: smooth;
  overflow: auto clip;
  scroll-snap-type: x mandatory;
  max-width: 100%;
  scrollbar-width: none;
}
.slider__track {
  display: inline-flex;
  gap: 0;
}
.slider__cover {
  scroll-snap-align: center;
  width: 100cqw;
  max-width: none;
}
.slider__arrow {
  position: absolute;
  top: 50%;
  appearance: none;
  border: currentColor solid;
  border-width: 0.7rem 0.7rem 0 0;
  font-size: 0;
  aspect-ratio: 1/1;
  width: 3rem;
  background: transparent;
  color: inherit;
  translate: 0 -50%;
}
.slider__arrow[disabled] {
  opacity: 0.5;
}
.slider__arrow--prev {
  rotate: -135deg;
  left: -5rem;
}
.slider__arrow--next {
  rotate: 45deg;
  right: -5rem;
}