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
+            <h3>Generelle henvendelser</h3>
-            <br />
             <a href="/#" target="_blank" className={styles.emailLink}>
               post@neuf.no
             </a>
           </div>
           <div>
-            Billetter
+            <h3>Billetter</h3>
-            <br />
             <a href="/#" target="_blank" className={styles.emailLink}>
               billetter@neuf.no
             </a>
@@ -97,8 +95,9 @@ export const Footer = () => {
       </div>
       <div className={styles.visit}>
         <h2>Besøk oss</h2>
+        <div className={styles.visitContent}>
           <div className={styles.address}>
-          <h3 className="suphead">Adresse</h3>
+            <h3>Adresse</h3>
             <div>
               Chateau Neuf
               <br />
@@ -113,11 +112,12 @@ export const Footer = () => {
           </div>
 
           <div className={styles.openingHoursWrapper}>
-          <h3 className="suphead">Åpningstider i dag</h3>
+            <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}>
         <NeonChillPig />
       </div>

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) {
+@media (max-width: 1000px) {
-  .social,
+  .footer {
-  .contact,
+    grid-template-columns: 1fr 1fr;
-  .visit {
+  }
-    grid-template-columns: 1fr;
+}
-
+
-    h2 {
+@media (max-width: 600px) {
-      grid-column: 1 / -1;
+  .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 {