CSS-only Slider

This is the same component as the carousel on the components page but with the following scoped css changes.

main .inner {
  --inner-padding-block: 0 var(--size-3);

  min-inline-size: 100%;
  display: grid;
  
  .carousel {
    .card {
      min-inline-size: 100%;
      aspect-ratio: 18/7;
      border-radius: 0px;
    }
  
    &::scroll-button(left) {
      translate: 110%;
    }
  
    &::scroll-button(right) {
      translate: -110%;
    }
  }
}