Merge branch 'main' into KAW-7682-heading-marker

blocks/image/image.css

@@ -0,0 +1,8 @@
+.block.image picture {
+  display: flex;
+}
+
+.block.image img {
+  width: 100%;
+  object-fit: cover;
+}

blocks/image/image.js

@@ -0,0 +1,3 @@
+export default async function decorate() {
+  // JS code
+}

scripts/scripts.js

@@ -65,6 +65,14 @@ function customDecorateSections(main) {
   });
 }
 
+function customDecorateBlocks(main) {
+  main.querySelectorAll('div.section > div > div').forEach((block) => {
+    if (block.classList.contains('full-width')) {
+      block.parentElement.classList.add('wrapper-full-width');
+    }
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -78,6 +86,7 @@ export function decorateMain(main) {
   decorateSections(main);
   customDecorateSections(main);
   decorateBlocks(main);
+  customDecorateBlocks(main);
 }
 
 /**

styles/styles.css

@@ -27,6 +27,10 @@
 
   /* nav height */
   --nav-height: 64px;
+
+  /* section paddings */
+  --section-y-padding: 15px;
+  --section-x-padding: 40px;
 }
 
 body {
@@ -217,18 +221,24 @@ div[class$="-wrapper"]:not(:first-child) {
 
 /* sections */
 main .section {
-  padding: 40px 15px;
+  padding: var(--section-y-padding) var(--section-x-padding);
+}
+
+main .section:last-child {
+  padding-bottom: 0;
 }
 
 @media (width >= 768px) {
-  main .section {
-    padding: 40px 30px;
+  :root {
+    --section-y-padding: 40px;
+    --section-x-padding: 30px;
   }
 }
 
 @media (width >= 960px) {
-  main .section {
-    padding: 70px 40px;
+  :root {
+    --section-y-padding: 70px;
+    --section-x-padding: 40px;
   }
 
   .section > div {
@@ -251,6 +261,18 @@ main .section {
   }
 }
 
+/* full width styles */
+.section .wrapper-full-width {
+  margin: 0;
+  width: 100%;
+  max-width: 100vw;
+}
+
+.block.full-width {
+  margin-left: calc(-1 * var(--section-x-padding));
+  margin-right: calc(-1 * var(--section-x-padding));
+}
+
 /* section metadata */
 main .section.light,
 main .section.highlight {