fix: style components to add responsivity

components/Current/Aside/Contacts/Contact.tsx

@@ -0,0 +1,82 @@
+import styles from "./contact.module.css"
+
+import { langEnum } from "@/types/lang"
+import type { Lang } from "@/types/lang"
+import type { ContactNode } from "@/types/requests/asides/contact"
+
+export default function Contact({
+  title,
+  mailing_address,
+  visiting_address,
+  phone,
+  system: { locale },
+}: ContactNode) {
+  const visitingAddressMessage = getVisitingAddressMessage(locale)
+  return (
+    <div>
+      <div>
+        <div>
+          <div>
+            <h2 className={styles.heading}>{title}</h2>
+            <p>
+              {mailing_address.name}
+              <br />
+              {mailing_address.street}
+              <br />
+              {mailing_address.zip} {mailing_address.city}
+              <br />
+              {mailing_address.country}
+            </p>
+            <p>
+              {visitingAddressMessage}: {visiting_address.street}{" "}
+            </p>
+          </div>
+        </div>
+        <div>
+          <div className={styles.highlightBlock}>
+            <h3>{phone.title}</h3>
+            <div className={styles.phoneContainer}>
+              <svg
+                focusable="false"
+                className={styles.phoneIcon}
+                viewBox="0 0 32 32"
+              >
+                <use
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                  xlinkHref="/Static/img/icons/sprites.svg#icon-phone"
+                ></use>
+              </svg>
+
+              <a
+                href={phone.number}
+                itemProp="telephone"
+                className={styles.phoneNumberLink}
+              >
+                {phone.number}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getVisitingAddressMessage(lang: Lang) {
+  switch (lang) {
+    case langEnum.sv:
+      return "Besöksadress"
+    case langEnum.en:
+      return "Visiting address"
+    case langEnum.da:
+      return "Besøgsadresse"
+    case langEnum.de:
+      return "Besuchsadresse"
+    case langEnum.fi:
+      return "Vierailuosoite"
+    case langEnum.no:
+      return "Besøksadresse"
+    default:
+      return ""
+  }
+}