General styles

src/components/sections/about/related/index.tsx

@@ -34,7 +34,8 @@ const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
         loop: false
       },
       '(max-width: 900px)': {
-        slides: { perView: 1.12, spacing: 12 }
+        slides: { perView: 1.12, spacing: 12 },
+        mode: 'snap'
       }
     }
   })

src/components/sections/about/team/team.tsx

@@ -85,7 +85,8 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
     },
     breakpoints: {
       '(max-width: 900px)': {
-        slides: { perView: 2.2, spacing: 20, origin: 'center' }
+        slides: { perView: 2.2, spacing: 20, origin: 'center' },
+        mode: 'snap'
       },
       '(max-width: 600px)': {
         slides: { perView: 1.65, spacing: 35, origin: 'center' }

src/components/sections/community/events/index.tsx

@@ -46,7 +46,8 @@ const Events = ({ eventsData, data }: Props) => {
         slides: { perView: 2.915, spacing: 20 }
       },
       '(max-width: 900px)': {
-        slides: { perView: 1.12, spacing: 12 }
+        slides: { perView: 1.12, spacing: 12 },
+        mode: 'snap'
       }
     }
   })

src/components/sections/homepage/benefits/index.tsx

@@ -57,7 +57,7 @@ const Benefits = ({ data }: Props) => {
   const ballRef = React.useRef<HTMLDivElement>(null)
   const gridRef = React.useRef<HTMLDivElement>(null)
   const userRef = React.useRef<HTMLDivElement>(null)
-  const isMobile = useMedia('(max-width: 768px)')
+  const isMobile = useMedia('(max-width: 900px)')
 
   const [isMounted, setIsMounted] = React.useState(false)
 

src/components/sections/homepage/latest-news/index.tsx

@@ -35,7 +35,8 @@ const LatestNews = ({ data, blogData }: Props) => {
         slides: { perView: 2.915, spacing: 20 }
       },
       '(max-width: 900px)': {
-        slides: { perView: 1.12, spacing: 12 }
+        slides: { perView: 1.12, spacing: 12 },
+        mode: 'snap'
       }
     }
   })

src/components/sections/homepage/what-others-say/index.tsx

@@ -37,6 +37,11 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => {
     slides: {
       perView: 1.2,
       spacing: 12
+    },
+    breakpoints: {
+      '(max-width: 900px)': {
+        mode: 'snap'
+      }
     }
   })
 

src/components/sections/newsroom/press/index.tsx

@@ -32,7 +32,8 @@ const Press = ({ blogData }: Props) => {
         slides: { perView: 2.915, spacing: 20 }
       },
       '(max-width: 900px)': {
-        slides: { perView: 1.12, spacing: 12 }
+        slides: { perView: 1.12, spacing: 12 },
+        mode: 'snap'
       }
     }
   })