diff --git a/src/components/sections/hero/HeroSplitVerticalMarquee.tsx b/src/components/sections/hero/HeroSplitVerticalMarquee.tsx
index e023fa1..720ff76 100644
--- a/src/components/sections/hero/HeroSplitVerticalMarquee.tsx
+++ b/src/components/sections/hero/HeroSplitVerticalMarquee.tsx
@@ -56,9 +56,9 @@ const HeroSplitVerticalMarquee = ({
           </div>
         </div>
 
-        <div className="w-full md:w-1/2 h-100 md:h-[75vh] flex flex-col gap-3 overflow-hidden">
-          <div className="flex-1 overflow-hidden mask-fade-x">
-            <div className="flex gap-3 animate-marquee-horizontal">
+        <div className="w-full md:w-1/2 h-100 md:h-[75vh] flex gap-3 overflow-hidden">
+          <div className="flex-1 overflow-hidden mask-fade-y">
+            <div className="flex flex-col gap-3 animate-marquee-vertical">
               {duplicatedLeft.map((item, index) => (
                 <div key={index} className="shrink-0 aspect-square p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
                   <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
@@ -67,8 +67,8 @@ const HeroSplitVerticalMarquee = ({
             </div>
           </div>
 
-          <div className="flex-1 overflow-hidden mask-fade-x">
-            <div className="flex gap-3 animate-marquee-horizontal-reverse">
+          <div className="flex-1 overflow-hidden mask-fade-y">
+            <div className="flex flex-col gap-3 animate-marquee-vertical-reverse">
               {duplicatedRight.map((item, index) => (
                 <div key={index} className="shrink-0 aspect-square p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
                   <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />