<p class="support-notice">🐤 <strong>Heads-up!</strong> Your browser does not support CSS Carousels. Try opening the demo in Chrome 135+ instead.</p>

<ul class="carousel">
  <li>
    <h2>Item Heading 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 4</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 5</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 6</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
  <li>
    <h2>Item Heading 7</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde ad placeat nisi sint quo omnis inventore numquam enim iure voluptates quaerat minus sit, aut labore eaque expedita! Minima, consectetur rerum.</p>
  </li>
</ul>

.carousel {
  anchor-name: --carousel;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 2rem;
  
  overflow: scroll;
  scroll-snap-type: x mandatory;
  
  scroll-marker-group: after;

  > li {
    scroll-snap-align: center;
  }
}

/* SCROLL MARKERS */

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  height: 25px;
  margin-block-start: 1rem;
}

.carousel li::scroll-marker {
  content: ' ';
  border: 2px solid CanvasText;
  border-radius: 100%;
  height: 25ppx;
  width: 25px;
}

.carousel li::scroll-marker:hover,
.carousel li::scroll-marker:focus-visible {
  background: LinkText;
}

.carousel li::scroll-marker:target-current {
  background: CanvasText;
}

/* SCROLL BUTTONS */

.carousel::scroll-button(*) {
  position: absolute;
  position-anchor: --carousel;
  height: 100%;
}

.carousel::scroll-button(left) {
  content: "Left";
  position-area: center left;
}
.carousel::scroll-button(right) {
  content: "Right";
  position-area: center right;
}

/* DEMO STYLES */

@layer decor {
  html {
    color-scheme: dark;
  }
  
  .carousel {
    border: 5px solid CanvasText;
    margin: auto;
    padding: 1.5rem;
    width: min(100%, 800px);
    
    > li {
      list-style: "";
    }
  }
}

@layer base {
  .support-notice {
    background: hsl(50 100% 90%);
    color: Canvas;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem;
    line-height: 1.55;
    margin-block: 1rem;
    margin-inline: auto;
    padding: 1rem;
    width: max(30ch, 80vw);
    
    @supports (scroll-marker-group: before) {
      display: none;
    }
  }
}