diff --git a/components/home/voices.tsx b/components/home/voices.tsx
index 9919b04..a3c9fac 100644
--- a/components/home/voices.tsx
+++ b/components/home/voices.tsx
@@ -61,7 +61,7 @@ export function VoicesRail() {
         tabIndex={0}
         role="region"
         aria-label="Stories from our community. Scroll sideways to see more."
-        className="hm-scroll mt-12 flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-[max(24px,calc((100vw-1200px)/2+24px))] pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#0A0A0A]"
+        className="hm-scroll mt-12 flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-[max(24px,calc((100%-1200px)/2+24px))] scroll-px-[max(24px,calc((100%-1200px)/2+24px))] pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#0A0A0A]"
       >
         {videos.map((video) => (
           <article key={video.name} className="w-[360px] shrink-0 snap-start overflow-hidden rounded-[20px] border border-[#E6E6E6]">
diff --git a/components/site/slider.tsx b/components/site/slider.tsx
index 7b35bf2..b989e77 100644
--- a/components/site/slider.tsx
+++ b/components/site/slider.tsx
@@ -44,7 +44,7 @@ export function Slider({
       <ul
         ref={track}
         aria-label={label}
-        className="-mx-6 flex snap-x snap-mandatory gap-4 overflow-x-auto px-6 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        className="-mx-6 flex snap-x snap-mandatory scroll-px-6 gap-4 overflow-x-auto px-6 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       >
         {children.map((child, index) => (
           <li key={index} className={`flex shrink-0 snap-start ${itemClassName}`}>
diff --git a/components/site/start-here.tsx b/components/site/start-here.tsx
index 3cce55a..44eda3d 100644
--- a/components/site/start-here.tsx
+++ b/components/site/start-here.tsx
@@ -30,7 +30,7 @@ export function StartHere() {
         <div
           role="tablist"
           aria-label="Who are you"
-          className="-mx-6 mt-8 flex snap-x gap-2 overflow-x-auto px-6 pb-2 [scrollbar-width:none] md:mx-0 md:flex-wrap md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden"
+          className="-mx-6 mt-8 flex snap-x scroll-px-6 gap-2 overflow-x-auto px-6 pb-2 [scrollbar-width:none] md:mx-0 md:flex-wrap md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden"
         >
           {startPaths.map((p) => {
             const active = p.id === selected