style sponsor list

web/src/components/sponsor/SponsorList.tsx

@@ -7,9 +7,8 @@ const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
   const { name, logo, website, text } = sponsor;
   return (
     <li className={styles.sponsorItem}>
-      <h2>{name}</h2>
-      {logo && (
-        <div className={styles.image}>
+      <div className={styles.image}>
+        {logo && (
           <Image
             src={logo.url}
             alt={`Logoen til ${name}`}
@@ -17,21 +16,24 @@ const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
             height={logo.height}
             sizes="20vw"
           />
-        </div>
-      )}
-      {text && (
-        <p
-          className={styles.sponsorText}
-          dangerouslySetInnerHTML={{ __html: text }}
-        />
-      )}
-      {website && (
-        <p>
-          <a href={website} target="_blank" rel="noopener">
-            Besøk nettside
-          </a>
-        </p>
-      )}
+        )}
+      </div>
+      <div className={styles.text}>
+        <h2>{name}</h2>
+        {text && (
+          <p
+            className={styles.sponsorText}
+            dangerouslySetInnerHTML={{ __html: text }}
+          />
+        )}
+        {website && (
+          <p className={styles.website}>
+            <a href={website} target="_blank" rel="noopener">
+              Besøk nettside
+            </a>
+          </p>
+        )}
+      </div>
     </li>
   );
 };

web/src/components/sponsor/sponsorList.module.scss

@@ -0,0 +1,57 @@
+.sponsorList {
+  margin-bottom: var(--spacing-section-bottom);
+  ul {
+    list-style: none;
+  }
+}
+
+.sponsorItem {
+  //background: var(--color-background-secondary);
+  border-top: var(--border);
+  padding: var(--spacing-m) 0;
+  display: grid;
+  grid-template-columns: 1fr var(--size-width-p) 1fr;
+  align-items: center;
+  column-gap: var(--spacing-gap-column);
+  margin-bottom: var(--spacing-gap-row);
+  min-height: 10rem;
+  &:last-child {
+    border-bottom: var(--border);
+  }
+  h2 {
+    font-size: var(--font-size-h3);
+    margin-bottom: 1rem;
+  }
+  p {
+    font-size: var(--font-size-caption);
+  }
+  .website {
+    display: inline-block;
+    font-weight: 600;
+    margin-top: 1rem;
+  }
+}
+
+.image {
+  width: 10rem;
+  height: 10rem;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 1260px) {
+  .sponsorItem {
+    grid-template-columns: 10rem 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .sponsorItem {
+    grid-template-columns: 5rem 1fr;
+    align-items: flex-start;
+  }
+  .image {
+    width: 5rem;
+    height: 5rem;
+  }
+}