<section>
  <div class="list">
    <ul>
      <li>Ducks, geese, and waterfowl</li>
      <li>Pheasants, grouse, and allies</li>
      <li>Grebes</li>
      <li>Pigeons and doves</li>
      <li>Sandgrouse</li>
      <li>Bustards</li>
      <li>Cuckoos</li>
      <li>Nightjars</li>
      <li>Swifts</li>
      <li>Cranes</li>
      <li>Rails, gallinules and coots</li>
      <li>Thick-knees</li>
      <li>Stilts and avocets</li>
      <li>Oystercatchers</li>
      <li>Plovers and lapwings</li>
      <li>Sandpipers and allies</li>
      <li>Pratincoles and coursers</li>
      <li>Skuas and jaegers</li>
      <li>Auks, murres and puffins</li>
      <li>Gulls, terns, and skimmers</li>
      <li>Loons</li>
      <li>Albatrosses</li>
      <li>Storks</li>
    </ul>
  </div>
  <div class="scroller"></div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

@property --gradient-position {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 1%;
}

@property --secondary-position {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

:root {
  --gap: 20px;
}

section {
  position: relative;
  padding-bottom: 50px;
  timeline-scope: --listTimeline;
}

.list {
  max-width: 90vw;
  border: 2px solid #37392e;
  border-radius: 5px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-timeline: --listTimeline inline;
}

.scroller {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 20px;
  border: 1px solid #8D99AE;
  border-radius: 30px;
  background: linear-gradient(90deg, #28afb0 0%, #28afb0 var(--gradient-position),  #ddcecd var(--secondary-position));
  content: "";
}

@supports (animation-timeline: view()) {
  .scroller {
    animation: moveBackground alternate linear;
    animation-timeline: --listTimeline;
  }
}

@keyframes moveBackground {
  0% {
    --gradient-position: 1%;
    --secondary-position: 50%;
  }
  90% {
    --gradient-position: 90%;
    --secondary-position: 100%;
  }
  100% {
    --gradient-position: 100%;
    --secondary-position: 100%;
  }
}

ul {
  scroll-snap-type: x mandatory;
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  scroll-padding-inline: var(--gap);
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  padding: 20px;
  flex-shrink: 0;
  aspect-ratio: 4/3;
  scroll-snap-align: start;
  text-align: center;
  background: #eee5e5;
}

@media screen and (min-width: 900px){
  li {
  font-size: 2rem;  
  width: 30vw;
  }
}

/* Demo styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #37392e;
  background: #ddcecd;
  font-family: "Poppins", sans-serif;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #28afb0;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #19647e;
}