The product grid scrolls one card at a time

The audio and production service pages display their packages in a horizontal carousel instead of a vertical list. The ProductGrid component renders a scrollable track with CSS snap points — snap-x and snap-mandatory on the container, snap-start on each card. Swipe on mobile and the next card snaps cleanly to the left edge. On desktop, arrow buttons appear at the edges. The arrows are not always visible. A scroll event listener checks the container's scrollLeft against scrollWidth minus clientWidth and shows or hides each arrow based on whether there is more content in that direction. Scroll all the way left and the left arrow disappears. Scroll all the way right and the right arrow disappears. The scroll distance is not a magic number. When you click an arrow, the component queries the first card element with data-product-card, reads its offsetWidth, adds the 16-pixel gap, and scrolls by exactly that distance. One card per click, every time, regardless of card width or screen size. The native scrollbar is hidden with three CSS rules — WebKit's pseudo-element, Firefox's scrollbar-width none, and IE's overflow style. The arrows are 44 by 44 pixels with aria-labels so keyboard and screen reader users get the same navigation. The component takes one prop — the service name. It calls getProductsByService internally, maps over the results, and renders a ProductCard for each one. Two service pages use the same component with different data. Zero duplicated scroll logic.