style touch-up

src/components/SocialsWidget.astro

@@ -36,6 +36,7 @@
     <a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
       <img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
       <span>X</span>
+    </a>
     <a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank"
        rel="external">
       <img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
@@ -58,23 +59,25 @@
     gap: 1.5rem;
 
     .grid {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 8rem);
+      max-width: 100%;
       justify-content: center;
-      align-items: center;
       width: 100%;
       gap: 1rem;
+      padding-block: 1rem;
 
       a {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        width: 5.5rem;
+        width: 100%;
         height: 5.5rem;
         text-decoration: none;
         padding: 0.5rem;
         gap: 0.25rem;
+        border-radius: 0.25rem;
 
         span {
           color: var(--text-secondary);
@@ -103,17 +106,14 @@
         &:hover {
           color: var(--text-main);
           img {
-            transform: translateY(-0.2rem);
+            transform: translateY(-0.1rem);
           }
         }
+        &:focus-within {
+          background-color: #548e9b;
+        }
         &:focus-visible {
           outline: none;
-          span {
-            color: var(--primary-color);
-            &::after {
-              width: 100%;
-            }
-          }
         }
       }
     }