add some featured content blocks, correct event item image size, placeholder color variables

web/src/components/blocks/FeaturedBlock.tsx

@@ -0,0 +1,18 @@
+import styles from "./featuredBlock.module.scss";
+
+export const FeaturedBlock = ({ block }: any) => {
+  return (
+    <div className={styles.featuredBlock}>
+      <div className={styles.text}>
+        <h2>En fremhevet artikkel eller side</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
+          tortor a interdum blandit. Sed ac purus sit amet libero posuere
+          molestie.
+        </p>
+        <a href="#">Mer om denne saken &rarr;</a>
+      </div>
+      <div className={styles.image}></div>
+    </div>
+  );
+};

web/src/components/blocks/featuredBlock.module.scss

@@ -0,0 +1,56 @@
+.featuredBlock {
+  background: var(--color-background-secondary);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--spacing-gap-column);
+
+  &:nth-of-type(even) {
+    .text {
+      order: 2;
+      align-items: flex-start;
+
+      p {
+        text-align: left;
+      }
+    }
+
+    .image {
+      order: 1;
+    }
+  }
+
+  +.featuredBlock {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: var(--spacing-gap-row);
+
+  h2 {
+    font-size: var(--font-size-h2);
+  }
+
+  p {
+    text-align: right;
+  }
+
+  a {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-lead);
+    font-style: italic;
+    text-decoration: none;
+  }
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-placeholder);
+}

web/src/components/blocks/richTextBlock.module.scss

@@ -67,7 +67,7 @@
         font-weight: 500;
         color: var(--color-chateauBlue);
         border-radius: 1em;
-        background: var(--color-neufPink);
+        background: var(--color-placeholder);
         width: 1.5em;
         height: 1.5em;
         text-align: center;