v2-hero block

blocks/v2-hero/v2-hero.css

@@ -0,0 +1,11 @@
+/* stylelint-disable selector-class-pattern */
+.section .v2-hero-wrapper {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.v2-hero__container, .v2-hero__container img {
+  width: 100%;
+}

blocks/v2-hero/v2-hero.js

@@ -0,0 +1,29 @@
+const blockName = 'v2-hero';
+
+export default function decorate(block) {
+  const pictures = block.querySelectorAll('picture');
+  const imgParent = pictures[0].parentElement;
+  const newPicture = document.createElement('picture');
+  const mediaQueries = ['(max-width: 749px)', '(min-width: 750px)'];
+  const MQ = window.matchMedia('(min-width: 750px)');
+  const img = document.createElement('img');
+
+  imgParent.classList.add(`${blockName}__container`);
+
+  mediaQueries.forEach((mediaQuery, index) => {
+    const source = document.createElement('source');
+    source.media = mediaQuery;
+    source.srcset = pictures[index].querySelector('img').src;
+    newPicture.appendChild(source);
+    if (MQ.matches) {
+      img.src = pictures[index].querySelector('img').src;
+      img.alt = pictures[index].querySelector('img').alt;
+    }
+  });
+  newPicture.appendChild(img);
+
+  // Remove the old pictures
+  pictures.forEach((picture) => picture.remove());
+
+  imgParent.appendChild(newPicture);
+}

scripts/scripts.js

@@ -22,6 +22,7 @@ function buildHeroBlock(main) {
   const picture = main.querySelector('picture');
   // eslint-disable-next-line no-bitwise
   if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
+    if (h1.closest('.v2-hero')) return;
     const section = document.createElement('div');
     section.append(buildBlock('hero', { elems: [picture, h1] }));
     main.prepend(section);