From ab63d5f1360b8d1e2a28ec728f23289480692814 Mon Sep 17 00:00:00 2001
From: Kelvin Hey <kelvinhey@outlook.com>
Date: Sun, 29 Dec 2024 10:47:58 -0300
Subject: [PATCH] fix: resolve image flickering in the access section on mobile

---
 public/assets/css/components/hero.css | 5 +++++
 src/views/Home.vue                    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/components/hero.css b/public/assets/css/components/hero.css
index 3700ad94..0f3f35d1 100644
--- a/public/assets/css/components/hero.css
+++ b/public/assets/css/components/hero.css
@@ -210,6 +210,11 @@
         max-width: 100%;
     }
 
+    /* Fix image flickering on mobile */
+    #access .hero-image { 
+        width: 900px;
+    }
+
     .hero.hero--bg-center .hero-wrapper {
         padding: 0;
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5908ee5e..bf39e4e0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -130,7 +130,7 @@
 
   <section class="hero hero--big hero--bg-center hero--extra-margin" id="access">
     <article class="hero-wrapper container">
-      <img class="hero-image onFocus" data-focus-class="fadeInZoom" src="/assets/images/backgrounds/apps-overview.png"
+      <img class="hero-image onFocus" data-focus-class="fadeIn" src="/assets/images/backgrounds/apps-overview.png"
         alt="Access the largest set of applications." />
       <div class="hero-content">
         <header class="hero-heading">