make footer better on mobile

src/components/footer.astro

@@ -14,8 +14,10 @@ import '../css/color.scss'
           )
       })}
     </div>
-    <!--<img src="https://media.ruthenic.com/pentagram.png" alt="Spinning pentagram" style="animation: rotation 10s infinite linear;">-->
-    <img src="https://media.ruthenic.com/lgbtq%20badge.png" alt="LGBTQ+ rights!"> <!-- sry idk what else to put there lmao -->
-    <img src="https://media.ruthenic.com/god%20cant%20help%20you%20now%20badge.png" alt="CAUTION: God can't help you now.">
+    <div class="img-container">
+        <!--<img src="https://media.ruthenic.com/pentagram.png" alt="Spinning pentagram" style="animation: rotation 10s infinite linear;">-->
+        <img src="https://media.ruthenic.com/lgbtq%20badge.png" alt="LGBTQ+ rights!"> <!-- sry idk what else to put there lmao -->
+        <img src="https://media.ruthenic.com/god%20cant%20help%20you%20now%20badge.png" alt="CAUTION: God can't help you now.">
+    </div>
   </div>
 </div>

src/css/base.scss

@@ -35,7 +35,7 @@
   @media (max-width: 470px) { //mobile
     justify-content: flex-end;
     align-items: center;
-    flex-direction: column;
+    flex-direction: row;
   }
   @media (min-width: 470px) { //desktop
     justify-content: center;
@@ -46,15 +46,24 @@
   bottom: 0;
   left: 0px;
   width: 100%;
-  img {
+  
+  .img-container {
     display: flex;
-    height: 30px*1.5;
-    @media (max-width: 470px) { //even smoler mobile
-      margin-top: 0.3125em;
-      margin-bottom: 0.3125em;
+    flex-direction: row;
+    @media (max-width: 470px) {
+      flex-direction: column;
     }
-    @media (min-width: 470px) { //desktop
-      margin-right: 0.625em;
+    img {
+      display: flex;
+      height: 45px;
+      @media (max-width: 470px) { //even smoler mobile
+        height: 30px;
+        margin-top: 0.3125em;
+        margin-bottom: 0.3125em;
+      }
+      @media (min-width: 470px) { //desktop
+        margin-right: 0.625em;
+      }
     }
   }
 }