play around with info box

web/src/app/page.tsx

@@ -9,6 +9,7 @@ import { UpcomingEvents } from "@/components/events/UpcomingEvents";
 import { Pig } from "@/components/general/Pig";
 import Link from "next/link";
 import Icon from "@/components/general/Icon";
+import { SectionHeader } from "@/components/general/SectionHeader";
 
 const HomeFragmentDefinition = graphql(`
   fragment Home on HomePage {
@@ -60,6 +61,7 @@ export default async function Home() {
       <FeaturedEvents events={featuredEvents} />
       <UpcomingEvents events={events} />
       <div className="infoBlock">
+        <SectionHeader heading="Besøk oss"link="/aktuelt" linkText="Praktisk info" />
         <div>
           <h2>Skal du besøke Chateau Neuf?</h2>
           <p>
@@ -68,15 +70,15 @@ export default async function Home() {
           </p>
           <Link href="/praktisk#adkomst" className="button">
             <span>Adresse og adkomst</span>
-            <Icon />
+            <Icon type="arrowRight" />
           </Link>
           <Link href="/praktisk#adkomst" className="button">
             <span>Billetter</span>
-            <Icon />
+            <Icon type="arrowRight" />
           </Link>
           <Link href="/praktisk#adkomst" className="button">
             <span>Åpningstider</span>
-            <Icon />
+            <Icon type="arrowRight" />
           </Link>
         </div>
         <div className="pig">

web/src/css/base.scss

@@ -286,17 +286,12 @@ select {
 }
 
 .infoBlock {
-  background: var(--color-goldenBeige);
+  background: var(--color-background-secondary);
   margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
   padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
   position: relative;
   overflow: hidden;
 
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  align-items: center;
-  min-height: 16rem;
-
   h2 {
     margin-bottom: var(--spacing-s);
   }