The rows of images shouldn't automatically scroll when the user prefers reduced motion

[DNin01]

On our landing page, we have a couple sections with collections of images:

• Within the first screen of the page, there's a collection of images. One image is displayed at a time, and you can flip through them by either using the controls or waiting for them to automatically flip through.
• Lower on the page, there's a Highlights section with a clothesline-like row of images that automatically scrolls at a constant rate unless you're hovering over it or manually scrolling it.

Both of these are a problem for people with vestibular motion triggers, and there should be a way to disable them. The easiest way to do this is with a CSS media query:

@media screen and (prefers-reduced-motion: no-preference) {
  /* Animation */
}

or with matchMedia in JavaScript:

if (!window.matchMedia("(prefers-reduced-motion)").matches) then {
  // Animate
}