diff --git a/source/_patterns/04-components/card/card-elements/_hero-image.twig b/source/_patterns/04-components/card/card-elements/_hero-image.twig
index 100373676ab0786e28c33c5ce5327e3baba4cdf6..723809c79eb9bac69003ad06e1f09ce2a562c0c2 100644
--- a/source/_patterns/04-components/card/card-elements/_hero-image.twig
+++ b/source/_patterns/04-components/card/card-elements/_hero-image.twig
@@ -1,4 +1,17 @@
-<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
+<style>
+  .card__featured-image {
+    background-image: url("{{ hero.img_element }}");
+  }
+  {% for source in hero.sources %}
+    @media only screen and {{ source.media | replace({'all and': ''}) }} {
+      .card__featured-image {
+        background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+      }
+    }
+  {% endfor %}
+</style>
+
+<div class="card__featured-image" role="img" aria-label="{{ hero.alt }}">
   {% if show_header %}
     {% include '@components/card/card-elements/_header.twig' with {
       'header': header,