Continue work on hero and layout, implement hover effect

src/components/Header.astro

@@ -7,26 +7,27 @@ const isEnglish = Astro.currentLocale === "en";
 ---
 
 <header>
-    <div>
+    <a href="." class="hoverable hoverable--diff">
+        <span class="sr-only">Back to home</span>
         <Image
             class="icon"
             src={logo}
             loading="eager"
             alt="Tideshift Digital logo mark"
         />
-    </div>
+    </a>
 
     <nav>
         <ul>
             <li>
                 <a
-                    class:list={[{ active: isEnglish }]}
+                    class:list={['hoverable', { active: isEnglish }]}
                     href={getRelativeLocaleUrl("en", "")}>EN</a
                 >
             </li>
             <li>
                 <a
-                    class:list={[{ active: !isEnglish }]}
+                    class:list={['hoverable',{ active: !isEnglish }]}
                     href={getRelativeLocaleUrl("de", "")}>DE</a
                 >
             </li>
@@ -38,7 +39,6 @@ const isEnglish = Astro.currentLocale === "en";
     header {
         display: flex;
         justify-content: space-between;
-        border: 1px solid var(--clr-ts-warm-red);
     }
 
     .icon {
@@ -53,7 +53,7 @@ const isEnglish = Astro.currentLocale === "en";
     }
 
     ul {
-        a {
+        & a {
             color: var(--clr-ts-light);
             text-decoration: none;