diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index 14d617c..5e8bb58 100644
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -32,8 +32,8 @@ const images = await Promise.all(imagesData.map(async (img) => ({
 })));
 ---
 
-<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
-  <div>
+<section class="grid md:grid-cols-2 md:items-center gap-4 md:gap-8 max-w-340 2xl:max-w-full px-4 py-14 sm:px-6 lg:px-8">
+  <div class="md:ml-12">
     <h1 class="smooth-reveal card-text-header block lg:text-7xl">
       <Fragment set:html={title} />
     </h1>
@@ -47,8 +47,7 @@ const images = await Promise.all(imagesData.map(async (img) => ({
       {secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
     </div>
   </div>
-
-  <div class="smooth-reveal-fade md:block w-full hidden">
+  <div class="smooth-reveal-fade md:block w-full hidden md:mr-12">
     <div
       class="flex justify-center w-full top-12 md:ml-4 overflow-hidden no-js-fallback"
       id="hero-image-container"