Merge pull request #414 from bitdefender/DEX-21187

add fragment block and style adjustments for medium image size

_src/blocks/columns/columns.css

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .columns-wrapper {
   padding: 0 var(--body-padding);
 }
@@ -33,6 +34,19 @@
   line-height: 22px;
 }
 
+.columns.medium-image-size p:has(picture) {
+  text-align: center;
+
+  img {
+    width: 140px;
+    height: 144px;
+  }
+}
+
+.columns.smaller-title h4 {
+  font-size: 16px;
+}
+
 .columns.awards > div > div > p {
   margin: 0;
   padding: 0 5px;
@@ -583,6 +597,10 @@
     gap: 32px;
   }
 
+  .columns.awards-fragment > div{
+    align-items: baseline;
+  }
+
   .columns > div > div {
     flex: 1;
     order: unset;

_src/blocks/fragment/fragment.css

@@ -0,0 +1,3 @@
+.fragment {
+    z-index: 1;
+}

_src/blocks/fragment/fragment.js

@@ -0,0 +1,53 @@
+/*
+ * Fragment Block
+ * Include content from one Helix page in another.
+ * https://www.hlx.live/developer/block-collection/fragment
+ */
+
+import {
+  decorateMain, getLanguageCountryFromPath,
+} from '../../scripts/scripts.js';
+
+import {
+  loadBlocks,
+} from '../../scripts/lib-franklin.js';
+
+/**
+     * Loads a fragment.
+     * @param {string} path The path to the fragment
+     * @returns {HTMLElement} The root element of the fragment
+     */
+async function loadFragment(path) {
+  const { country, language } = getLanguageCountryFromPath();
+  if (path && path.startsWith('/')) {
+    try {
+      // eslint-disable-next-line no-param-reassign
+      path = path.replace(/lang/g, `${language}-${country}`);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+    const resp = await fetch(`${path}.plain.html`);
+    if (resp.ok) {
+      const main = document.createElement('main');
+      main.innerHTML = await resp.text();
+      decorateMain(main);
+      await loadBlocks(main);
+      return main;
+    }
+  }
+  return null;
+}
+
+export default async function decorate(block) {
+  const link = block.querySelector('a');
+  const path = link ? link.getAttribute('href') : block.textContent.trim();
+  const fragment = await loadFragment(path);
+  if (fragment) {
+    const fragmentSection = fragment.querySelector(':scope .section');
+    if (fragmentSection) {
+      block.closest('.section').classList.add(...fragmentSection.classList);
+      block.closest('.fragment-wrapper').replaceWith(...fragmentSection.childNodes);
+    }
+  }
+}