clean footer + adjust for mobile

web/src/components/layout/Footer.tsx

@@ -77,15 +77,13 @@ export const Footer = () => {
         <h2>Kontakt oss</h2>
         <div className={styles.emails}>
           <div>
-            Generelle henvendelser
-            <br />
+            <h3>Generelle henvendelser</h3>
             <a href="/#" target="_blank" className={styles.emailLink}>
               post@neuf.no
             </a>
           </div>
           <div>
-            Billetter
-            <br />
+            <h3>Billetter</h3>
             <a href="/#" target="_blank" className={styles.emailLink}>
               billetter@neuf.no
             </a>
@@ -97,25 +95,27 @@ export const Footer = () => {
       </div>
       <div className={styles.visit}>
         <h2>Besøk oss</h2>
-        <div className={styles.address}>
-          <h3 className="suphead">Adresse</h3>
-          <div>
-            Chateau Neuf
-            <br />
-            Slemdalsveien 15
-            <br />
-            0369 Oslo
-            <br />
-            <a href="#" target="_blank">
-              Vis i Google Maps&nbsp;<Icon type="externalLink" />
-            </a>
+        <div className={styles.visitContent}>
+          <div className={styles.address}>
+            <h3>Adresse</h3>
+            <div>
+              Chateau Neuf
+              <br />
+              Slemdalsveien 15
+              <br />
+              0369 Oslo
+              <br />
+              <a href="#" target="_blank">
+                Vis i Google Maps&nbsp;<Icon type="externalLink" />
+              </a>
+            </div>
           </div>
-        </div>
 
-        <div className={styles.openingHoursWrapper}>
-          <h3 className="suphead">Åpningstider i dag</h3>
-          <OpeningHoursTable />
-          <Link href="/praktisk#apningstider">Se alle åpningstider&nbsp;<Icon type="arrowRight" /></Link>
+          <div className={styles.openingHoursWrapper}>
+            <h3>Åpningstider i dag</h3>
+            <OpeningHoursTable />
+            <Link href="/praktisk#apningstider">Se alle åpningstider&nbsp;<Icon type="arrowRight" /></Link>
+          </div>
         </div>
       </div>
       <div className={styles.pig}>

web/src/components/layout/footer.module.scss

@@ -13,13 +13,18 @@
   row-gap: var(--spacing-gap-column);
 
   h2 {
+    grid-column: 1 / -1;
     font-family: var(--font-serif);
     font-weight: 400;
     font-size: var(--font-size-h3);
+    margin-bottom: var(--spacing-m);
   }
 
   h3 {
-    margin-bottom: 1em;
+    line-height: inherit;
+    font-size: 1em;
+    font-weight: 600;
+    margin: 0;
   }
 }
 
@@ -41,32 +46,31 @@
 .social,
 .contact,
 .visit {
+  line-height: 1.78;
   margin-bottom: var(--spacing-section-bottom);
 
   ul {
     list-style: none;
   }
-
-  h2 {
-    margin-bottom: var(--spacing-s);
-    grid-column: span 3;
-  }
 }
 
 .visit {
   grid-column: span 2;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
 }
 
+
+.visitContent {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: flex-start;
+}
 .address {
-  line-height: 1.78;
   margin-bottom: 2rem;
 }
 
 .emails {
   >div {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
   }
 }
 
@@ -121,25 +125,17 @@
  }
 }
 
-@media (max-width: 900px) {
-  .social,
-  .contact,
-  .visit {
-    grid-template-columns: 1fr;
-
-    h2 {
-      grid-column: 1 / -1;
-    }
+@media (max-width: 1000px) {
+  .footer {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .footer {
+    grid-template-columns: 1fr;
+  }
+  .visit {
+    grid-column: span 1;
   }
-
-  .social ul,
-  .emails,
-  .visit >div, .visit >ul {
-    grid-column: 1 / -1;
-  }
-
-  .emails {
-    grid-template-columns: 1fr;
-  }
-
 }

web/src/css/button.scss

@@ -40,10 +40,11 @@ button,
   }
 
   &.tertiary {
+    font-size: var(--font-size-caption);
     color: currentColor;
     background: transparent;
     border: 2px solid currentColor;
-    padding: .25rem .75rem;
+    padding: .2rem .75rem;
   }
 
   &.toggler {