Refactor home hero graphic styles and update image attributes for better responsiveness. Adjusted width to 100% with a max-width of 856px and set height to auto. Removed width attribute from the image tag in index.page.tsx.

index.page.tsx

@@ -112,7 +112,7 @@ export default function Index() {
       <div className="overflow-hidden">
         <section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center">
           <div className="w-100">
-            <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" loading='eager' />
+            <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" loading='eager' />
           </div>
           <div className="col-lg-6 mx-auto text-center pl-0 pr-0">
             <div className="d-flex flex-column-reverse">

styles/_pages.scss

@@ -33,10 +33,16 @@
   }
 
   #home-hero-graphic {
-    width: 856px;
+    width: 100%;
+    max-width: 856px;
+    height: auto;
     object-fit: cover;
     content: url("../img/home-hero.svg");
     margin-bottom: 24px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    
     @media (min-width: 992px) {
       min-height: 470px;
     }