Challenge 1: Fix the Carousel's Reduced-Motion Gap — Possible Solution
====================================================================

.carousel {
  animation: slide 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .carousel {
    animation: none;
  }
}

WHICH CHAPTER'S PRINCIPLE THIS APPLIES
-------------------------------------------
Chapter 6 (Color, Contrast & Visual Design) — specifically its
prefers-reduced-motion section. Auto-rotating carousels with sliding
transitions are named directly in that chapter as a concrete example
of the kind of motion that can trigger real discomfort for users with
vestibular disorders, alongside parallax scrolling and large animated
transitions.

WHY THIS WORKS
--------------
- The @media (prefers-reduced-motion: reduce) block follows the exact
  same structural pattern Chapter 6 itself demonstrated for its own
  carousel example — this capstone's fix is a direct, near-literal
  reapplication of that chapter's own worked example to this specific
  page's carousel.
- Setting animation: none inside the media query disables the sliding
  auto-rotation specifically for users whose OS-level setting requests
  reduced motion, while leaving the animation fully intact (animation:
  slide 4s infinite) for everyone else who hasn't set that preference —
  the fix is conditional, not a removal of the feature altogether.
- Since a product carousel is largely DECORATIVE/convenience content
  here (unlike, say, Chapter 6's Challenge 3 notification banner, which
  was genuinely functional), simply stopping the animation entirely
  (rather than needing an alternate way to reveal the same content
  instantly, as that functional-animation challenge required) is a
  perfectly sufficient fix — the underlying product images are still
  fully visible and browsable by other means (e.g. manual navigation
  arrows, if present), just without the automatic, potentially
  motion-sickness-inducing rotation.