Preview tranlational arrow

assets/css/style-v12.scss

@@ -147,14 +147,20 @@ html {
 }
 
 #hero-image-ultrawide {
-  height:50vw;
   max-height:350px;
   width: auto;
   max-width: none;
   margin-left: 50%;
   transform: translateX(-50%);
 }
 
+// When view is below medium reduce image width
+@media (max-width: 768px) {
+  #hero-image-ultrawide {
+    max-height:450px;
+  }
+}
+
 .stat-card {
   padding: 20px;
   background-color:  #f7f7f7;

index.html

@@ -21,8 +21,11 @@
 {% include get/fellowships.liquid %}
 <div class="bg-light overflow-hidden">
     <picture>
-        <source srcset="{{ 'images/HTC_Graphic_Outline.webp' | relative_url }}">
-        <img id="hero-image-ultrawide" src="{{ 'images/HTC_Graphic_Outline.png' | relative_url }}"  alt="CHTC Logo" />
+        <source srcset="{{ 'images/homepage/TranslationalArrow_Mobile.webp' | relative_url }}" media="(max-width: 768px)">
+        <source srcset="{{ 'images/homepage/TranslationalArrow_Mobile.png' | relative_url }}" media="(max-width: 768px)">
+        <source srcset="{{ 'images/homepage/TranslationalArrow.webp' | relative_url }}">
+        <source srcset="{{ 'images/homepage/TranslationalArrow.jpg' | relative_url }}">
+        <img id="hero-image-ultrawide" src="{{ 'images/homepage/TranslationalArrow.png' | relative_url }}"  alt="CHTC Logo" />
     </picture>
 </div>
 <div class="container-xxl">