<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</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</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</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</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</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 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;
  
  overflow: scroll;
  scroll-snap-type: x mandatory;
  
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

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

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

@layer decor {
  html {
    color-scheme: dark;
  }
  
  .carousel {
    border: 5px solid CanvasText;
    padding: 1.5rem;
    
    > li {
      list-style: "";
    }
  }
}

@layer base {
  .support-notice {
    background: hsl(50 100% 90%);
    border-radius: 8px;
    color: #000;
    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;
    }
  }
}