make footer better on mobile

src/components/footer.astro

@@ -14,8 +14,10 @@ import '../css/color.scss'
           )
       })}
     </div>
+    <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,10 +46,18 @@
   bottom: 0;
   left: 0px;
   width: 100%;
+  
+  .img-container {
+    display: flex;
+    flex-direction: row;
+    @media (max-width: 470px) {
+      flex-direction: column;
+    }
     img {
       display: flex;
-    height: 30px*1.5;
+      height: 45px;
       @media (max-width: 470px) { //even smoler mobile
+        height: 30px;
         margin-top: 0.3125em;
         margin-bottom: 0.3125em;
       }
@@ -58,6 +66,7 @@
       }
     }
   }
+}
 
 .homepage-main {
   img {