.carousel {
  width: 400px;
  margin: 3em auto 0.5em auto;
  display: grid;
  grid-template-columns: repeat(12, 400px);
  gap: 1em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  anchor-name: --carousel;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel::scroll-marker-group {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  margin-bottom: 3em;
}

.card::scroll-marker {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #070;
}

.card::scroll-marker:target-current {
  background-color: #fff;
}

.card {
  height: 250px;
  background-color: rgba(0, 0, 0, 0.4666666667);
  background-size: cover;
  border-radius: 0.5em;
  text-align: center;
  align-content: center;
  scroll-snap-align: start;
}

.carousel::scroll-button(left),
.carousel::scroll-button(right) {
  content: "next";
  background-color: #070;
  font-size: 0.7em;
  text-transform: uppercase;
  color: #fff;
  height: 60px;
  width: 60px;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  position: fixed;
  position-anchor: --carousel;
  position-area: right center;
  translate: -50% 0;
}

.carousel::scroll-button(left) {
  content: "prev";
  position-area: left center;
  translate: 50% 0;
}

.carousel::scroll-button(left):disabled,
.carousel::scroll-button(right):disabled {
  background-color: #141;
  color: rgba(255, 255, 255, 0.4666666667);
  pointer-events: none;
  cursor: default;
}

.c1 {
  background-image: url(https://picsum.photos/id/1054/400/250);
}

.c2 {
  background-image: url(https://picsum.photos/id/1077/400/250);
}

.c3 {
  background-image: url(https://picsum.photos/id/996/400/250);
}

.c4 {
  background-image: url(https://picsum.photos/id/931/400/250);
}

.c5 {
  background-image: url(https://picsum.photos/id/892/400/250);
}

.c6 {
  background-image: url(https://picsum.photos/id/859/400/250);
}

.c7 {
  background-image: url(https://picsum.photos/id/827/400/250);
}

.c8 {
  background-image: url(https://picsum.photos/id/797/400/250);
}

.c9 {
  background-image: url(https://picsum.photos/id/654/400/250);
}

.c10 {
  background-image: url(https://picsum.photos/id/550/400/250);
}

.c11 {
  background-image: url(https://picsum.photos/id/524/400/250);
}

.c12 {
  background-image: url(https://picsum.photos/id/338/400/250);
}