diff --git a/blocks/career-hero/career-hero.js b/blocks/career-hero/career-hero.js
deleted file mode 100644
index ae57d20d..00000000
--- a/blocks/career-hero/career-hero.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { readBlockConfig } from '../../scripts/lib-franklin.js';
-import { getNamedValueFromTable } from '../../scripts/scripts.js';
-
-function addImage(mediaRow, target, ...classes) {
-  const mediaDiv = document.createElement('div');
-  classes.forEach((c) => mediaDiv.classList.add(c));
-  const pictureTag = mediaRow.querySelector('picture');
-  mediaDiv.appendChild(pictureTag);
-  target.appendChild(mediaDiv);
-
-  return mediaDiv;
-}
-
-function deleteConfigBlock(block, firstNonCfgEl) {
-  while (block.children.length > 0 && block.children[0] !== firstNonCfgEl) {
-    block.children[0].remove();
-  }
-}
-
-function addTextEl(tag, txt, parent, ...classes) {
-  const newDiv = document.createElement(tag);
-  newDiv.textContent = txt;
-  classes.forEach((c) => newDiv.classList.add(c));
-  parent.appendChild(newDiv);
-}
-
-export default function decorate($block) {
-  const section = document.querySelector('.section.career-hero-container');
-  if (section) {
-    section.classList.add('full-width');
-  }
-
-  const cfg = readBlockConfig($block);
-
-  const bgimg = cfg['hero-background'];
-  const s = `background-image: url(${bgimg})`;
-  $block.style = s;
-
-  const heroDiv = document.createElement('div');
-  heroDiv.classList.add('career-hero-top');
-  $block.appendChild(heroDiv);
-
-  const heroLeft = document.createElement('div');
-  heroLeft.classList.add('career-hero-left');
-  heroDiv.appendChild(heroLeft);
-  const photo = getNamedValueFromTable($block, 'photo');
-  addImage(photo, heroLeft, 'career-hero-photo');
-  addTextEl('h6', cfg.name, heroLeft, 'career-hero-name');
-  addTextEl('p', cfg.title, heroLeft, 'career-hero-title');
-
-  const heroRight = document.createElement('div');
-  heroRight.classList.add('career-hero-right');
-  heroDiv.appendChild(heroRight);
-  addTextEl('blockquote', cfg.quote, heroRight, 'career-hero-quote');
-  addTextEl('h6', 'Career background', heroRight, 'career-hero-careerbgtitle'); // TODO i18n
-  addTextEl('p', cfg['career-background'], heroRight, 'career-hero-careerbg');
-
-  deleteConfigBlock($block, heroDiv);
-}
diff --git a/blocks/career-hero/career-hero.css b/blocks/hero-career/hero-career.css
similarity index 72%
rename from blocks/career-hero/career-hero.css
rename to blocks/hero-career/hero-career.css
index e8bf42fe..e042cd52 100644
--- a/blocks/career-hero/career-hero.css
+++ b/blocks/hero-career/hero-career.css
@@ -1,10 +1,11 @@
-.career-hero {
+.hero-career {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 58%;
+    height: 43.75rem;
 }
 
-.career-hero .career-hero-top {
+.hero-career .hero-career-top {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -12,23 +13,23 @@
     max-width: 75rem;
 }
 
-.career-hero .career-hero-left {
+.hero-career .hero-career-left {
     color: var(--white);
     margin: 3rem 0;
     text-align: center;
     width: 155px;
 }
 
-.career-hero .career-hero-photo {
+.hero-career .hero-career-left picture {
     margin-bottom: 1rem;
 }
 
-.career-hero .career-hero-photo img {
+.hero-career .hero-career-left img {
     height: 10.75rem;
     width: auto;
 }
 
-.career-hero .career-hero-name {
+.hero-career .hero-career-name {
     color: var(--white);
     font-size: var(--heading-font-size-xxs);
     letter-spacing: 0.9px;
@@ -37,11 +38,11 @@
     text-transform: unset;
 }
 
-.career-hero .career-hero-title {
+.hero-career .hero-career-title {
     font-size: var(--body-font-size-xs);
 }
 
-.career-hero .career-hero-right {
+.hero-career .hero-career-right {
     color: var(--white);
     background-color: var(--primary);
     width: 100vw;
@@ -49,7 +50,7 @@
     margin-top: 0;
 }
 
-.career-hero .career-hero-quote {
+.hero-career .hero-career-quote {
     font-size: var(--heading-font-size-s);
     font-style: var(--font-style-normal);
     line-height: 32px;
@@ -58,7 +59,7 @@
     text-indent: 0;
 }
 
-.career-hero .career-hero-quote::before {
+.hero-career .hero-career-quote::before {
     content: '“';
     font-size: 90px;
     line-height: 1;
@@ -67,7 +68,7 @@
     top: -44px;
 }
 
-.career-hero .career-hero-quote::after {
+.hero-career .hero-career-quote::after {
     content: '”';
     font-size: 90px;
     line-height: 1;
@@ -77,7 +78,7 @@
     right: 0;
 }
 
-.career-hero .career-hero-careerbgtitle {
+.hero-career .hero-career-careerbgtitle {
     color: white;
     font-size: var(--heading-font-size-xs);
     font-weight: var(--font-weight-bold);
@@ -86,63 +87,63 @@
     text-transform: unset;
 }
 
-.career-hero .career-hero-careerbg {
+.hero-career .hero-career-careerbg {
     font-size: var(--heading-font-size-xxs);
     line-height: 22px;
     margin-inline: 16px;
 }
 
 @media (min-width: 62rem) {
-    .career-hero {
+    .hero-career {
         background-position: center;
     }
 
-    .career-hero .career-hero-top {
+    .hero-career .hero-career-top {
         flex-direction: row;
         align-items: unset;
         height: 700px;
         margin-inline: auto;
     }
 
-    .career-hero .career-hero-left {
+    .hero-career .hero-career-left {
         width: 21rem;
         margin-top: 5rem;
         margin-right: 4rem;
     }
 
-    .career-hero .career-hero-photo img {
-        height: 296px;
+    .hero-career .hero-career-left img {
+        height: 18.5rem;
     }
 
-    .career-hero .career-hero-name {
+    .hero-career .hero-career-name {
         font-size: var(--heading-font-size-xs);
         padding-top: 0;
     }
 
-    .career-hero .career-hero-title {
+    .hero-career .hero-career-title {
         font-size: var(--body-font-size-s);
     }
 
-    .career-hero .career-hero-right {
+    .hero-career .hero-career-right {
         background-color: unset;
         margin-top: 120px;
         padding-top: unset;
         width: calc(100% - 336px - 4rem);
     }
 
-    .career-hero .career-hero-quote {
+    .hero-career .hero-career-quote {
         font-size: var(--heading-font-size-xl);
         line-height: 59px;
         margin: 0 0 97px;
     }
 
-    .career-hero .career-hero-careerbgtitle {
+    .hero-career .hero-career-careerbgtitle {
         font-size: var(--heading-font-size-m);
         letter-spacing: 1.2px;
         margin: 0 0 13px;
     }
 
-    .career-hero .career-hero-careerbg {
+    .hero-career .hero-career-careerbg {
         font-size: var(--body-font-size-m);
         line-height: 32px;
         margin: 0;
diff --git a/blocks/hero-career/hero-career.js b/blocks/hero-career/hero-career.js
new file mode 100644
index 00000000..4e8f9487
--- /dev/null
+++ b/blocks/hero-career/hero-career.js
@@ -0,0 +1,54 @@
+import {
+  createOptimizedPicture,
+  getMetadata,
+  readBlockConfig,
+} from '../../scripts/lib-franklin.js';
+
+function deleteConfigBlock(block, firstNonCfgEl) {
+  while (block.children.length > 0 && block.children[0] !== firstNonCfgEl) {
+    block.children[0].remove();
+  }
+}
+
+function addTextEl(tag, txt, parent, ...classes) {
+  const newDiv = document.createElement(tag);
+  newDiv.textContent = txt;
+  classes.forEach((c) => newDiv.classList.add(c));
+  parent.appendChild(newDiv);
+}
+
+export default function decorate(block) {
+  const section = document.querySelector('.section.hero-career-container');
+  if (section) {
+    section.classList.add('full-width');
+  }
+
+  const cfg = readBlockConfig(block);
+
+  const bgimg = cfg['hero-background'];
+  const s = `background-image: url(${bgimg})`;
+  block.style = s;
+
+  const heroDiv = document.createElement('div');
+  heroDiv.classList.add('hero-career-top');
+  block.appendChild(heroDiv);
+
+  const heroLeft = document.createElement('div');
+  heroLeft.classList.add('hero-career-left');
+  heroDiv.appendChild(heroLeft);
+
+  const photoURL = getMetadata('og:image');
+  const pic = createOptimizedPicture(photoURL, cfg.name);
+  heroLeft.append(pic);
+  addTextEl('h6', cfg.name, heroLeft, 'hero-career-name');
+  addTextEl('p', cfg.title, heroLeft, 'hero-career-title');
+
+  const heroRight = document.createElement('div');
+  heroRight.classList.add('hero-career-right');
+  heroDiv.appendChild(heroRight);
+  addTextEl('blockquote', cfg.quote, heroRight, 'hero-career-quote');
+  addTextEl('h6', 'Career background', heroRight, 'hero-career-careerbgtitle'); // TODO i18n
+  addTextEl('p', cfg['career-background'], heroRight, 'hero-career-careerbg');
+
+  deleteConfigBlock(block, heroDiv);
+}