/* Basic carousel CSS */
.css-carousel {
  /* Resets for carousel appearance */
  list-style: none;
  padding: 0;
  /* The only CSS necessary for a simple swiper Carousel */
  display: flex;
  overflow-inline: auto;
  /* Prevents accidental page Back/Forward */
  overscroll-behavior-inline: contain;
  /* Confines the scrolling direction */
  scroll-snap-type: inline mandatory;
  /* Be nice to others */
  @media (prefers-reduced-motion: no-preference) { 
    /* Makes the sliding a little smoother */
    scroll-behavior: smooth;
  }
  
/** Create "groups" to swipe **/
  /* Override Flex from above, breaks this functionality */
  display: block;
  /* The Carousel container needs an explicit height to force overflow */
  max-height: 200px;
  /* Sets the column scope */
  columns: 1;
  /* Aligns the slides within the column */
  text-align: center;
  
  li {
    /* Make things look a little nicer */
    min-width: 200px;
    aspect-ratio: 1 / 1;
    border: 1px solid;
    place-content: center;
    text-align: center;
    /* Allow slides to sit side-by-side */
    display: inline-block;
  }

  &::column {
  /* Snap each scroll to the center of the column */
    scroll-snap-align: center;
  }
}