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

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);
+}