Stacked hero video button position; adjust basic hero video button po…

…sition
SU-SWS · Feb 18, 2025 · 559e918 · 559e918
1 parent 63d0b4f
commit 559e918
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/components/Hero/BasicHero.styles.ts b/components/Hero/BasicHero.styles.ts
@@ -10,7 +10,7 @@ export const root = (paddingType: HeroPaddingType, hasVideo: boolean) => cnb('re
   'py-[40vw] sm:py-[28vw] xl:py-[19vw] 3xl:py-[36rem]' : paddingType === 'balance-lg' && !hasVideo,
 
   // Has background video
-  'rs-pb-2': hasVideo,
+  'pb-20 md:pb-36': hasVideo,
   'pt-[45vw] sm:pt-[30vw] xl:pt-[25vw] 3xl:pt-[40rem]': paddingType === 'top' && hasVideo,
   'pt-[34vw] sm:pt-[24vw] xl:pt-[16vw] 3xl:pt-[26rem]': paddingType === 'balance-sm' && hasVideo,
   'pt-[36vw] sm:pt-[26vw] xl:pt-[17vw] 3xl:pt-[30rem]': paddingType === 'balance-md' && hasVideo,

diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx
@@ -218,11 +218,13 @@ export const StoryHeroStacked = ({
                   className={styles.video}
                 />
               </div>
-              <VideoButton
-                isPause={isPlaying}
-                onClick={toggleVideo}
-                className="absolute block z-10 bottom-20 right-20"
-              />
+              <Container width="wide" className="absolute block z-10 bottom-0 right-0 pb-20 md:pb-36">
+                <VideoButton
+                  isPause={isPlaying}
+                  onClick={toggleVideo}
+                  className="relative"
+                />
+              </Container>
             </div>
           )}
         </AnimateInView>