<h1>Прокручивайте полоску у контейнера справа</h1>
<div class="main-container">
  <div class="sardinas-container">
    <img width="400" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/latagato.png" alt="lata de sardinas">
  </div>

<div class="scroll-container">
  <p>The CSS scroll-driven animations module provides functionality that builds on top of the CSS animations module and Web Animations API. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.</p>
    <p>The CSS scroll-driven animations module provides functionality that builds on top of the CSS animations module and Web Animations API. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.</p>
</div>
</div>

body { background-color: #F5DBC8; color: #1C140C; font-family: "Open Sans", arial, sans-serif, system-ui; line-height: 1.5; margin: 2rem auto; }
h1 { font-size: 1.2rem; line-height: 1; text-align: center; text-transform: uppercase;}
.main-container {
  display: flex;
  justify-content: space-around;
  margin: 1.5rem auto;
  max-width: 80em;
  timeline-scope: --containerText;
}
.sardinas-container {
  background-color: #CEB6A5;
  border-radius: 8px;
  scrollbar-color: #1C140C #BCA493;
  padding: 30px 0;
  height: 227px;
  width: 440px;
}
.sardinas-container img {
  object-fit: cover;
  object-position: 0 0;
  height: 227px;
  width: 400px;
  
  animation: moveUp steps(6) both;
  animation-timeline: --containerText;
}

@keyframes moveUp {
  to { object-position: 0 -1362px; }
}

.scroll-container {
  background-color: #ACBFBD;
  border-radius: 8px;
  color: #333;
  font-family: arial, sans-serif;
  padding: 20px 40px;
  scrollbar-color: #5B6D6B #97ACAA;
  height: 247px;
  width: 360px;
  overflow-y: scroll;
  
  scroll-timeline: --containerText;
}