Snap scrolling for carousel

web/components/carousel.tsx

@@ -38,7 +38,7 @@ export function Carousel(props: {
   return (
     <div className={clsx('relative', className)}>
       <Row
-        className="scrollbar-hide w-full gap-4 overflow-x-auto scroll-smooth"
+        className="scrollbar-hide w-full snap-x gap-4 overflow-x-auto scroll-smooth"
         ref={ref}
         onScroll={onScroll}
       >

web/components/double-carousel.tsx

@@ -19,7 +19,7 @@ export function DoubleCarousel(props: {
         ? range(0, Math.floor(contracts.length / 2)).map((col) => {
             const i = col * 2
             return (
-              <Col key={contracts[i].id}>
+              <Col className="snap-start scroll-m-4" key={contracts[i].id}>
                 <ContractCard
                   contract={contracts[i]}
                   className="mb-2 w-96 shrink-0"

web/pages/tournaments/index.tsx

@@ -237,7 +237,7 @@ const MarketCarousel = (props: { slug: string }) => {
           key={m.id}
           contract={m}
           hideGroupLink
-          className="mb-2 max-h-[200px] w-96 shrink-0"
+          className="mb-2 max-h-[200px] w-96 shrink-0 snap-start scroll-m-4 md:snap-align-none"
           questionClass="line-clamp-3"
           trackingPostfix=" tournament"
         />