Mobile hero: left-justify; force logo heights via CSS classes

- background-position right -> left so the photo aligns left and the
  gray block + tab stay visible on the right.
- Replace the height='15'/'30' HTML attributes on the footer logos with
  CSS classes (.logo-stanford-medicine, .logo-hhmi) and explicit height
  rules in the stylesheet — guards against any cached or browser-quirk
  case where the height attribute didn't win.

Author: rhiju

_includes/footer.html

@@ -5,10 +5,10 @@
   </div>
   <div class="institutional-logos">
     <a href="https://med.stanford.edu/" target="_blank" rel="noopener noreferrer external">
-      <img src="{{ '/assets/images/site/public/nav_logo_stanford_medicine.png' | relative_url }}" alt="Stanford Medicine" height="15">
+      <img class="logo-stanford-medicine" src="{{ '/assets/images/site/public/nav_logo_stanford_medicine.png' | relative_url }}" alt="Stanford Medicine">
     </a>
     <a href="https://www.hhmi.org/scientists/rhiju-das" target="_blank" rel="noopener noreferrer external">
-      <img src="{{ '/assets/images/site/public/nav_logo_hhmi.jpg' | relative_url }}" alt="Howard Hughes Medical Institute" height="30">
+      <img class="logo-hhmi" src="{{ '/assets/images/site/public/nav_logo_hhmi.jpg' | relative_url }}" alt="Howard Hughes Medical Institute">
     </a>
   </div>
 </footer>

assets/css/style.scss

@@ -192,7 +192,7 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
     aspect-ratio: auto;
     height: 200px;
     background-size: auto 100%;
-    background-position: right center;
+    background-position: left center;
   }
   .page-hero-tab {
     width: 80%;