.carousel {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  overflow-x: auto;
  }

  .carousel > img {
    width: 100%;
    object-fit: cover;
    }
  .carousel > div {
    &::scroll-marker {
      display: block;
      content: " ";
      width: 24px;
      border-radius: 50%;
      border: 1px solid silver;
      cursor: pointer;
      background: transparent;
      justify-content: center;
      transition: background 0.5s ease-out;
    }