#carrusel ul {
  padding: 20px;
  display: flex;
  gap: 20px;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

#carrusel ul li {
  list-style-type: none;
  padding: 0px;
  flex: 0 0 100%;
  scroll-snap-align: center;
  
}

#carrusel ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

#carrusel ul::scroll-button(*):hover,
#carrusel ul::scroll-button(*):focus {
  opacity: 1;
}

#carrusel ul::scroll-button(*):active {
  translate: 1px 1px;
}

#carrusel ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

#carrusel ul::scroll-button(left) {
  content: "<";
  border: none;
  font-family: Consolas;
  font-size: 3rem;
  height: 50px;
  width: 50px;
  color: white;
  background-color: blue;
  border-radius: 50%;
  cursor: pointer;
}

#carrusel ul::scroll-button(right) {
  content: ">";
  border: none;
  font-family: Consolas;
  font-size: 3rem;
  height: 50px;
  width: 50px;
  color: white;
  background-color: blue;
  border-radius: 50%;
  cursor: pointer;
}

#carrusel ul {
  anchor-name: --my-carousel;
}

#carrusel ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

#carrusel ul::scroll-button(left) {
  right: calc(anchor(left) - 200px);
  bottom: calc(anchor(top) - 600px);
}

#carrusel ul::scroll-button(right) {
  left: calc(anchor(right) - 200px);
  bottom: calc(anchor(top) - 600px);
}

#carrusel ul {
  scroll-marker-group: after;
}

#carrusel ul::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 20px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

#carrusel ul li::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid blue;
  border-radius: 50%;
}

#carrusel ul li::scroll-marker:target-current {
  background-color: blue;
}