Removed spacer in footer and added additional social-notice area instead; uppercase titles in columns; proper column alignment; social notice text centered; copyright paddings added; adaptive up to 582px as of now

frontend/src/lib/components/footer.svelte

@@ -15,7 +15,6 @@
         <p class="social-row footer__social-notice">Me on other resources:</p>
     </div>
     
-    <div class="social-row footer__social-spacer"></div>
     <div class="social-row footer__social-links">
         <Icon image={TelegramIcon} size="32px"/>
         <Icon image={MatrixIcon} size="32px"/>
@@ -23,21 +22,22 @@
     </div>
 
     <div class="footer-column footer__column1">
-        <p class="footer-column-title">Мясо</p>
+        <p class="footer-column-title">WeirdCat.su</p>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitrtempor invidunt ut aliquyam erat, sed diam voluptua. At vero eo</p>
 
     </div>
     <div class="footer-column footer__column2">
-        <p class="footer-column-title">Мясо</p>
+        <p class="footer-column-title">Useful links</p>
         <p>Buy a slave</p>
         <p>Hire me please</p>
         <p>Buy me a coffee</p>
         <p>Help</p>
     </div>
     <div class="footer-column footer__column3">
-        <p class="footer-column-title">Мясо</p>
+        <p class="footer-column-title">Contact</p>
-        <p>Мясо</p>
+        <p>nikolai@weirdcat.su</p>
-        <p>Мясо</p>
+        <p>+7 999 999 99 99</p>
+        <Icon image={CatIcon} size="64px"/>
     </div>
 
     <p class="footer__copyright">(C) WeirdCat 2024</p>
@@ -54,7 +54,7 @@
     .footer {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
-        grid-template-areas: "social-notice spacer social-links"
+        grid-template-areas: "social-notice social-notice social-links"
                              "column1 column2 column3"
                              "copyright copyright copyright";
 
@@ -72,8 +72,9 @@
 
         display: flex;
         flex-direction: column;
+        justify-self: center;
         gap: 20px;
-        padding: 30px 90px;
+        padding: 30px 20px;
 
         font-family: "Montserrat" sans-serif;
         font-size: 20px;
@@ -91,10 +92,11 @@
     .footer-column-title {
 
         position: relative;
-        padding-bottom: 5px;
+        padding-bottom: 20px;
 
         font-family: "Source_Sans_3" sans-serif;
         font-weight: bold;
+        text-transform: uppercase;
 
     }
 
@@ -111,30 +113,28 @@
     /*FIXME: Make another class title here*/
     .container {
         grid-area: social-notice;
-        color: var(--col_panel);
+        height: 100%;
+        background-color: var(--col_panel);
         margin: 0;
+        line-height: 30px;
     }
 
     .footer__social-notice {
 
-        margin: 0;
+        margin: 0 auto;
         padding: 20px;
-        height: 32px;
+        width: 100%;
 
         font-family: 'Source_Sans_3' sans-serif;
         font-weight: bold;
         font-size: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        line-height:1fr;
 
         color: var(--col_text_panel);
     }
 
-    .footer__social-spacer {
-
-        grid-area: spacer;
-        width: auto;
-
-    }
-
     .footer__social-links {
 
         display: flex;
@@ -148,8 +148,9 @@
     .footer__copyright {
         grid-area: copyright;
         margin: auto 0 0 0;
+        padding: 10px;
         height: fit-content;
-        width: 100%;
+
 
         font-family: "Montserrat" sans-serif;
         font-size: 24px;