.container {
    position: relative;
    block-size: 400px;
    inline-size: 100%;
  }
  .carousel {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    place-items: center;
    background: #000;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100%;

    scroll-behavior: smooth;

    scroll-marker-group: after;

    &::scroll-button(right) {
      position: absolute;
      top: 40%;
      right: 20;
      content: "⮕" / "Scroll Right";
    }

    &::scroll-button(left) {
      position: absolute;
      top: 40%;
      left: 20;
      content: "⬅" / "Scroll Left";
    }

    &::scroll-button(*) {
      width: 50px;
      height: 50px;
      background-color: transparent;
      border-radius: 50%;
      color: #fff;
      border: 1px solid #444;
    }

    &::scroll-button(*):hover {
      background-color: #444;
      color: #fff;
    }

    &::scroll-marker-group {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      gap: 10px;
    }
  }
  .carousel-item {
    scroll-snap-align: center;

    &::scroll-marker {
      content: "";
      border: 1px solid #444;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }

    &::scroll-marker:target-current {
      background-color: #444;
    }
  }