/** Requires wrapper element to control overflow **/
.css-carousel {
	/* Optionally remove the scrollbar */
	scrollbar-width: none;
	/* Setup basic Carousel */
	display: flex;
	overflow-inline: auto;
	/* Prevent accidental page Back/Forward */
	overscroll-behavior-inline: contain;
	/* Confine 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;
	}
	/** Both ULs should be `flex` and have animation **/
	ul {
    /* Some resets, because I am using a `ul` */
  	list-style: none;
  	padding: 0;
	  display: flex;
	  /* Be nice to others */
	  @media (prefers-reduced-motion: no-preference) { 
		  animation: animated-loop 20s linear infinite;
	  }
	}
	li {
		/* To make this a little more appealing */
		aspect-ratio: 1 / 1;
		min-width: 10vw;
		outline: 1px solid;
    place-content: center;
    text-align: center;
	}
}

/* Create the animation for the loop effect */
/** Note that iOS (currently) needs the GPU activation from translate3d **/
@keyframes animated-loop {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-100%, 0, 0); }
}