<div class="gallery">
  <div class="gallery-scroll-container">
    <div class="gallery-progress" role="progressbar" aria-label="progress"></div>
    <img src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa1.svg" alt="en salsa de tomate" draggable="false" width="500">
    <img src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa2.svg" alt="en aceite de oliva" draggable="false" width="500">
    <img src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa3.svg" alt="en aceite de girasol" draggable="false" width="500">
  </div>
</div>

*, *::before, *::after { box-sizing: border-box; }
body {
    background-color: #f5dbc8;
    color: #1c140c;
    font-family: "Open Sans", arial, system-ui;
    letter-spacing: 0.06em;
    margin: 0 auto;
}
.gallery {
  margin: 1rem auto;
  max-width: 520px;
  padding-top: 10px;
  position: relative;
  width: 100%;
}
.gallery-scroll-container {
  display: flex;
  gap: 20px;
  overflow-x: scroll;
  scrollbar-color: #97adaa #1c140c;
  padding: 20px;
  scroll-snap-type: x mandatory;
  width: 520px;
  
  animation: bg steps(1);
  animation-timeline: --scroller;
  scroll-timeline: --scroller inline;
}
@keyframes bg {
  0%, 33.3% { background: #de010a; }
  33.3%, 66.6% { background: #349674;}
  66.6%, 100% { background: #DDA403; }
}

.gallery-scroll-container img {
  flex: 1 1 100%;
  scroll-snap-align: center;
}

.gallery-progress {
  background-color: #3848a0;
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: scaleX(calc(1 / 3));
  height: 10px;
  width: 100%;
  
  animation: progressBar linear;
  animation-timeline: --scroller;
}

@keyframes progressBar {
  to { transform: scaleX(1) }
}