add lead to association header, tidy up

web/src/app/foreninger/[slug]/page.tsx

@@ -71,12 +71,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <AssociationHeader association={association} />
-      {association.lead && (
-        <div
-          className="lead"
-          dangerouslySetInnerHTML={{ __html: association.lead }}
-        />
-      )}
       <PageContent blocks={association.body} />
     </main>
   );

web/src/components/associations/AssociationHeader.tsx

@@ -10,10 +10,16 @@ export const AssociationHeader = ({
   association: AssociationFragment;
 }) => {
   return (
-    <section className={`${styles.associationHeader} ${association.logo && styles.hasLogo}`}>
+    <section className={`${styles.associationHeader} ${association.logo && styles.hasLogo} ${(association.logo || association.lead) && styles.wide}`}>
       <div>
           <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
           <h1>{association.title}</h1>
+          {association.lead && (
+            <div
+              className="lead"
+              dangerouslySetInnerHTML={{ __html: association.lead }}
+            />
+          )}
           {association.websiteUrl && (
             <a className="button" href={association.websiteUrl} target="_blank">
               <span>Besøk nettside</span>

web/src/components/associations/associationHeader.module.scss

@@ -1,25 +1,38 @@
 .associationHeader {
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 1fr;
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
+  align-items: center;
   max-width: var(--size-width-p);
   margin: 0 auto var(--spacing-section-bottom);
 
-  &.hasLogo {
+  &.wide {
     max-width: var(--size-width-lead);
   }
 
+  &.hasLogo {
+    grid-template-columns: 2fr 1fr;
+  }
+
   h1 {
     font-size: var(--font-size-h1);
     margin-bottom: var(--spacing-m);
   }
+
+  p {
+    margin-bottom: var(--spacing-m);
+  }
 }
 
 @media (max-width: 600px) {
   .associationHeader {
     grid-template-columns: 1fr;
 
+    &.hasLogo {
+      grid-template-columns: 1fr;
+    }
+
     img {
       max-width: 16rem;
     }