adjust news article and fact box styling

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

@@ -1,13 +1,13 @@
 .factBoxWrapper {
   max-width: var(--size-width-p);
-  margin: 0 auto;
+  margin: 0 auto var(--spacing-m);
 }
 
 .factBox {
   background: var(--color-background-secondary);
   margin: 0 calc(var(--spacing-s) * -1);
   padding: var(--spacing-s);
-  font-size: var(--font-size-caption);
+  font-size: var(--font-size-body);
 
   &[data-background-color="betongGray"] {
     background-color: var(--color-betongGray);

web/src/css/news.scss

@@ -1,6 +1,17 @@
 .news-header {
   display: block;
   text-align: center;
+  width: var(--size-width-lead);
+  max-width: 100%;
+  margin: 0 auto var(--spacing-m);
+
+  figure{
+    width: 100%;
+
+    >div, img {
+      width: 100%;
+    }
+  }
 }
 
 .news-title {
@@ -18,4 +29,10 @@
   a {
     text-decoration: none;
   }
+}
+
+@media (max-width: 600px) {
+  .news-header {
+    text-align: left;
+  }
 }

web/src/css/variables.scss

@@ -60,6 +60,7 @@
 
   // sizes
   --size-width-p: 36rem;
+  --size-width-lead: 48rem;
   --size-icon: 1em;
   --size-icon-circle: 2.4rem;
   --size-icon-large: 3.4rem;