h2 Marquee with text
.marquee
  .marquee-content During a test yesterday, SpaceX fired up the engines on one of its Falcon 9 rockets, a vehicle that will perform a crucial test flight for NASA in the months ahead.
  
.marquee
  .marquee-content The two spacecraft also provide us with stunning views of our planet.
  
h2 Marquee with image
.marquee
  .marquee-content
    each image in [1012,1014,1024,103,1031]
      img(src=`https://picsum.photos/id/${image}/300/200`)


h2 Marquee down
.marquee.marquee-down
  .marquee-content
    each image in [104,1040,1048,1052,11]
      img(src=`https://picsum.photos/id/${image}/300/200`)
  

@keyframes marquee {
  to {
    transform: translate(var(--marquee-x,-100%), var(--marquee-y,0));
  }
}

.marquee {
  $this: &;
  overflow: hidden;
  &-content {
    animation: marquee var(--marquee-duration,20s) infinite linear;
    position: relative;
    padding-left: 100%;
    width: max-content;
    &:hover {
      animation-play-state: paused;
    }
  }
  &-down {
    --marquee-height: 200px;
    --marquee-y: -100%;
    --marquee-x: 0;
    height: var(--marquee-height);
    #{$this}-content {
      display:flex;
      flex-direction: column;
      padding-left: 0;
      padding-top: var(--marquee-height);
    }
  }
}

/*! Solo demo */
*,
::after,
::before {
  box-sizing: border-box;
}

body {
  padding: 2rem;
}