association styling progress

web/src/app/foreninger/page.tsx

@@ -61,7 +61,7 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
       {index.body && <Blocks blocks={index.body} />}
-      <AssociationList associations={associations} />
+      <AssociationList associations={associations} heading="Foreninger og utvalg" />
     </main>
   );
 }

web/src/components/associations/AssociationList.tsx

@@ -1,17 +1,25 @@
 import { AssociationFragment } from "@/gql/graphql";
 import { AssociationItem } from "./AssociationItem";
 import styles from "./associationList.module.scss";
+import { SectionHeader } from "../general/SectionHeader";
 
 export const AssociationList = ({
   associations,
+  heading
 }: {
   associations: AssociationFragment[];
+  heading: string
 }) => {
   return (
-    <ul className={styles.associationList}>
+    <section>
-      {associations.map((association) => (
+      {heading && (
-        <AssociationItem key={association.id} association={association} />
+        <SectionHeader heading={heading} />
-      ))}
+      )}
-    </ul>
+      <ul className={styles.associationList}>
+        {associations.map((association) => (
+          <AssociationItem key={association.id} association={association} />
+        ))}
+      </ul>
+    </section>
   );
 };

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

@@ -1,16 +1,19 @@
 .associationItem {
+  --item-height: 10rem;
   position: relative;
   list-style: none;
   display: grid;
-  grid-template-columns: 7rem 1fr;
+  grid-template-columns: 1fr auto;
   align-items: flex-start;
-  column-gap: var(--spacing-gap-column);
+  column-gap: 1rem;
   row-gap: var(--spacing-gap-row);
   padding: var(--spacing-s);
+  background: var(--color-background-secondary);
 }
 
 .image {
-  width: 100%;
+  order: 2;
+  width: 6rem;
   padding-top: 100%;
   position: relative;
 
@@ -24,11 +27,26 @@
 }
 
 .text {
+  order: 1;
   padding: 0;
+  height: var(--item-height);
+  overflow: hidden;
+  position: relative;
+  &:after {
+    content: "";
+    background-image: linear-gradient(to top, var(--color-background-secondary), transparent);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 4rem;
+    pointer-events: none;
+  }
 }
 
 .title {
   margin-bottom: var(--spacing-s);
+  font-size: 1.1rem;
 }
 
 .excerpt {

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

@@ -1,7 +1,14 @@
 .associationList {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(3, 1fr);
-  column-gap: var(--spacing-gap-column);
+  column-gap: calc(var(--spacing-gap-column)/2);
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);
+}
+
+
+@media (max-width: 900px) {
+  .associationList {
+    grid-template-columns: 1fr;
+  }
 }