diff --git a/hugo-modules/core/utils/asset/image/img.html b/hugo-modules/core/utils/asset/image/img.html
index 04eacdb..ade4571 100644
--- a/hugo-modules/core/utils/asset/image/img.html
+++ b/hugo-modules/core/utils/asset/image/img.html
@@ -3,7 +3,7 @@
   Render Contentful asset (image/...). Uses data from cssg-plugin-assets if available.
 
   @example - Go Template
-    {{- partial "utils/asset/image" (dict
+    {{- partial "utils/asset/image/img" (dict
       "context" $image
       "options" (dict
         "sizes" "(max-width: 768px) 100vw, 768px"
@@ -51,7 +51,7 @@
       {{- $width := .width -}}
       {{- $height := .height -}}
       {{/* Preload hint is added in sources.html */}}
-       <img src="{{- $src -}}" width="{{- $width -}}" height="{{- $height -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
+       <img src="{{- $src -}}" {{ $image_attributes }} alt="{{- $alt -}}"{{ with $params.preload }} fetchpriority="high"{{ end }}>
     {{- end -}}
   {{- else -}}
     {{- with $url -}}
diff --git a/hugo-modules/core/utils/asset/image/sources.html b/hugo-modules/core/utils/asset/image/sources.html
index 70861b7..d4f6029 100644
--- a/hugo-modules/core/utils/asset/image/sources.html
+++ b/hugo-modules/core/utils/asset/image/sources.html
@@ -3,7 +3,7 @@
   Render Contentful asset (image/...). Uses data from cssg-plugin-assets if available.
 
   @example - Go Template
-    {{- partial "utils/asset/image" (dict
+    {{- partial "utils/asset/image/sources" (dict
       "context" $image
       "options" (dict
         "sizes" "(max-width: 768px) 100vw, 768px"
@@ -53,7 +53,7 @@
       {{- range $srcsets -}}
         {{ $srcset := .srcset | default "" }}
         {{ $type := .type | default ""}}
-        <source sizes="{{- $local_sizes -}}" srcset="{{- $srcset -}}" type="{{- $type -}}"{{ with $media}}media="{{ . }}"{{ end }}>
+        <source sizes="{{- $local_sizes -}}" width="{{- $width -}}" height="{{- $height -}}" srcset="{{- $srcset -}}" type="{{- $type -}}"{{ with $media}}media="{{ . }}"{{ end }}>
         {{- $preload_attr := (dict
           "as" "image"
           "imagesizes" $local_sizes
diff --git a/hugo-modules/core/utils/asset/svg.html b/hugo-modules/core/utils/asset/svg.html
index 0a7f051..cf2b360 100644
--- a/hugo-modules/core/utils/asset/svg.html
+++ b/hugo-modules/core/utils/asset/svg.html
@@ -6,7 +6,7 @@
     {{- partial "utils/asset/svg" (dict
       "context" $svg
       "options" (dict
-        "inline" "true"
+        "inline" true
         "class_name" "c-icon"
         "lazy" true
       )
diff --git a/hugo-modules/core/utils/asset/video.html b/hugo-modules/core/utils/asset/video.html
index aeb0c2f..8371b96 100644
--- a/hugo-modules/core/utils/asset/video.html
+++ b/hugo-modules/core/utils/asset/video.html
@@ -3,12 +3,12 @@
   Render Contentful asset (video/...). Uses data from cssg-plugin-assets if available.
 
   @example - Go Template
-    {{- partial "utils/asset/svg" (dict
+    {{- partial "utils/asset/video" (dict
       "context" $video
       "options" (dict
-        "loop" "false"
-        "muted" "false"
-        "autoplay" "false"
+        "loop" false
+        "muted" false
+        "autoplay" false
         "class_name" "c-video"
       )
     ) -}}
@@ -26,9 +26,10 @@
 {{- $autoplay := $params.autoplay | default true -}}
 {{- $playsinline := $params.playsinline | default true -}}
 {{- $controls := $params.controls | default false -}}
-{{- $poster := $params.poster | default false -}}
+{{/* Use transparent base64, the real poster should be loaded as <picture> element */}}
+{{- $poster := "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" -}}
 {{- $muted := (or $autoplay $params.muted) -}}
-{{- $loading := cond (eq $params.lazy true) "lazy" ($params.loading | default false) -}}
+{{- $loading := cond (eq ($params.lazy | default true) true) "lazy" ($params.loading | default false) -}}
 {{- $preload := $params.preload | default false -}}
 {{- $media := $params.media -}}
 
@@ -39,18 +40,11 @@
   "controls" $controls
   "class" $class_name
   "poster" $poster
+  "loading" $loading
 ) $params -}}
 
 {{- if in $mime_type "video" -}}
-  {{- $preload_attr := (dict
-    "as" "image"
-    "href" $poster
-    "media" $media
-  ) -}}
-  {{- if and $preload $poster (not (in ($globals.Scratch.Get "preload") $preload)) -}}
-    {{- $globals.Scratch.Add "preload" (slice $preload) -}}
-  {{- end -}}
-  <video {{$attributes}}>
+  <video {{$attributes}}{{- if eq $loading "lazy" -}} data-video{{- end -}}>
     {{- if eq $loading "lazy" -}}
       <source data-src="{{- $url -}}" type="{{- $mime_type -}}" />
     {{- else -}}
diff --git a/packages/contentful-migrations/ui/1000000000003-create-c-media-migration.js b/packages/contentful-migrations/ui/1000000000002-create-c-responsive-media-migration.js
similarity index 55%
rename from packages/contentful-migrations/ui/1000000000003-create-c-media-migration.js
rename to packages/contentful-migrations/ui/1000000000002-create-c-responsive-media-migration.js
index 7c99e65..615ae3f 100644
--- a/packages/contentful-migrations/ui/1000000000003-create-c-media-migration.js
+++ b/packages/contentful-migrations/ui/1000000000002-create-c-responsive-media-migration.js
@@ -4,9 +4,9 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
   const defaultLocale = await helpers.locale.getDefaultLocale();
 
   const cMedia = migration
-    .createContentType('c-media')
-    .name('Component: Media')
-    .description('Images / loop videos with predefined ratios')
+    .createContentType('c-responsive-media')
+    .name('Component: Responsive media')
+    .description('Image or short loop video for different screen sizes')
     .displayField('internal_name');
 
   cMedia
@@ -23,8 +23,8 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .createField('alt')
     .name('Alt text')
     .type('Symbol')
-    .localized(false)
-    .required(false)
+    .localized(true)
+    .required(true)
     .validations([])
     .disabled(false)
     .omitted(false);
@@ -33,15 +33,15 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .createField('caption')
     .name('Caption')
     .type('Text')
-    .localized(false)
+    .localized(true)
     .required(false)
     .validations([])
     .disabled(false)
     .omitted(false);
 
   cMedia
-    .createField('media')
-    .name('Media')
+    .createField('mobile_media')
+    .name('Mobile > Media')
     .type('Link')
     .localized(true)
     .required(true)
@@ -56,35 +56,21 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
 
   cMedia
     .createField('mobile_ratio')
-    .name('Mobile ratio')
-    .type('Symbol')
-    .localized(false)
-    .required(false)
-    .validations([
-      {
-        in: ['hd', 'rectangle', 'square', 'portrait'],
-      },
-    ])
-    .disabled(false)
-    .omitted(false);
-
-  cMedia
-    .createField('desktop_ratio')
-    .name('Desktop ratio')
+    .name('Mobile > Ratio')
     .type('Symbol')
     .localized(false)
     .required(false)
     .validations([
       {
-        in: ['hd', 'rectangle', 'square', 'portrait'],
+        in: ['1x1', '16x9', '9x16', '4x3', '3x4'],
       },
     ])
     .disabled(false)
     .omitted(false);
 
   cMedia
-    .createField('focus_area')
-    .name('Focus area')
+    .createField('mobile_focus_area')
+    .name('Mobile > Focus area')
     .type('Symbol')
     .localized(false)
     .required(false)
@@ -112,8 +98,8 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .omitted(false);
 
   cMedia
-    .createField('media_hd')
-    .name('Media hd')
+    .createField('desktop_media')
+    .name('Desktop > Media')
     .type('Link')
     .localized(true)
     .required(false)
@@ -127,49 +113,47 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .linkType('Asset');
 
   cMedia
-    .createField('media_rectangle')
-    .name('Media rectangle')
-    .type('Link')
-    .localized(true)
-    .required(false)
-    .validations([
-      {
-        linkMimetypeGroup: ['image', 'video'],
-      },
-    ])
-    .disabled(false)
-    .omitted(false)
-    .linkType('Asset');
-
-  cMedia
-    .createField('media_square')
-    .name('Media square')
-    .type('Link')
-    .localized(true)
+    .createField('desktop_ratio')
+    .name('Desktop > Ratio')
+    .type('Symbol')
+    .localized(false)
     .required(false)
     .validations([
       {
-        linkMimetypeGroup: ['image', 'video'],
+        in: ['1x1', '16x9', '9x16', '4x3', '3x4'],
       },
     ])
     .disabled(false)
-    .omitted(false)
-    .linkType('Asset');
+    .omitted(false);
 
   cMedia
-    .createField('media_portrait')
-    .name('Media portrait')
-    .type('Link')
-    .localized(true)
+    .createField('desktop_focus_area')
+    .name('Desktop > Focus area')
+    .type('Symbol')
+    .localized(false)
     .required(false)
     .validations([
       {
-        linkMimetypeGroup: ['image', 'video'],
+        in: [
+          'center',
+          'top',
+          'bottom',
+          'right',
+          'left',
+          'top_right',
+          'top_left',
+          'bottom_right',
+          'bottom_left',
+          'face',
+          'faces',
+        ],
       },
     ])
+    .defaultValue({
+      [defaultLocale.code]: 'center',
+    })
     .disabled(false)
-    .omitted(false)
-    .linkType('Asset');
+    .omitted(false);
 
   cMedia
     .createField('lazy')
@@ -185,49 +169,34 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .omitted(true);
 
   cMedia.changeFieldControl('internal_name', 'builtin', 'singleLine', {
-    helpText: 'e.g. "Home page > Stage > Media"',
+    helpText: 'e.g. "Home page > Media > Responsive media"',
   });
 
   cMedia.changeFieldControl('alt', 'builtin', 'singleLine', {});
 
   cMedia.changeFieldControl('caption', 'builtin', 'multipleLine', {});
 
-  cMedia.changeFieldControl('media', 'builtin', 'assetLinkEditor', {});
+  cMedia.changeFieldControl('mobile_media', 'builtin', 'assetLinkEditor', {});
 
-  cMedia.changeFieldControl('mobile_ratio', 'builtin', 'dropdown', {
-    helpText: 'Select the ratio for mobile. Leave empty to use original image dimensions',
-  });
-
-  cMedia.changeFieldControl('desktop_ratio', 'builtin', 'dropdown', {
-    helpText: 'Select the ratio for desktop. Leave empty to use original image dimensions',
+  cMedia.changeFieldControl('mobile_focus_area', 'builtin', 'dropdown', {
+    helpText: 'Choose a focus area that will be used for resizing. Default is "center".',
   });
 
-  cMedia.changeFieldControl('focus_area', 'builtin', 'dropdown', {
-    helpText: 'You can choose the focus area for resizing. The default is center',
-  });
-
-  cMedia.changeFieldControl('media_hd', 'builtin', 'assetLinkEditor', {
-    helpText: 'Ratio: 16:9',
-    showLinkEntityAction: true,
-    showCreateEntityAction: true,
+  cMedia.changeFieldControl('mobile_ratio', 'builtin', 'dropdown', {
+    helpText: 'Select a ratio for mobile or leave empty to use original image dimensions.',
   });
 
-  cMedia.changeFieldControl('media_rectangle', 'builtin', 'assetLinkEditor', {
-    helpText: 'Ratio: 4:3',
-    showLinkEntityAction: true,
-    showCreateEntityAction: true,
+  cMedia.changeFieldControl('desktop_media', 'builtin', 'assetLinkEditor', {
+    helpText:
+      'Can be used to use different ratios on mobile and desktop. If empty, the mobile media will be used for both.',
   });
 
-  cMedia.changeFieldControl('media_square', 'builtin', 'assetLinkEditor', {
-    helpText: 'Ratio: 1:1',
-    showLinkEntityAction: true,
-    showCreateEntityAction: true,
+  cMedia.changeFieldControl('desktop_ratio', 'builtin', 'dropdown', {
+    helpText: 'Select a ratio for desktop. Leave empty to use original media dimensions.',
   });
 
-  cMedia.changeFieldControl('media_portrait', 'builtin', 'assetLinkEditor', {
-    helpText: 'Ratio: 2:3',
-    showLinkEntityAction: true,
-    showCreateEntityAction: true,
+  cMedia.changeFieldControl('desktop_focus_area', 'builtin', 'dropdown', {
+    helpText: 'Choose a focus area that will be used for resizing. Default is "center".',
   });
 
   cMedia.changeFieldControl('lazy', 'builtin', 'boolean', {});
diff --git a/packages/contentful-migrations/ui/1000000000004-create-c-editorial-migration.js b/packages/contentful-migrations/ui/1000000000003-create-c-editorial-migration.js
similarity index 98%
rename from packages/contentful-migrations/ui/1000000000004-create-c-editorial-migration.js
rename to packages/contentful-migrations/ui/1000000000003-create-c-editorial-migration.js
index 09bb500..9cb02d3 100644
--- a/packages/contentful-migrations/ui/1000000000004-create-c-editorial-migration.js
+++ b/packages/contentful-migrations/ui/1000000000003-create-c-editorial-migration.js
@@ -75,7 +75,7 @@ module.exports = async function (migration) {
     .required(false)
     .validations([
       {
-        linkContentType: ['c-image', 'c-media'],
+        linkContentType: ['c-responsive-media'],
       },
     ])
     .disabled(false)
diff --git a/packages/contentful-migrations/ui/1000000000006-create-c-menu-migration.js b/packages/contentful-migrations/ui/1000000000004-create-c-menu-migration.js
similarity index 100%
rename from packages/contentful-migrations/ui/1000000000006-create-c-menu-migration.js
rename to packages/contentful-migrations/ui/1000000000004-create-c-menu-migration.js
diff --git a/packages/contentful-migrations/ui/1000000000007-move-submenu-field-migration.js b/packages/contentful-migrations/ui/1000000000005-move-submenu-field-migration.js
similarity index 100%
rename from packages/contentful-migrations/ui/1000000000007-move-submenu-field-migration.js
rename to packages/contentful-migrations/ui/1000000000005-move-submenu-field-migration.js
diff --git a/packages/contentful-migrations/ui/1100000000001-create-m-stage-migration.js b/packages/contentful-migrations/ui/1100000000001-create-m-stage-migration.js
index d2ee470..653ac7d 100644
--- a/packages/contentful-migrations/ui/1100000000001-create-m-stage-migration.js
+++ b/packages/contentful-migrations/ui/1100000000001-create-m-stage-migration.js
@@ -91,7 +91,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .required(false)
     .validations([
       {
-        linkContentType: ['c-image', 'c-media'],
+        linkContentType: ['c-responsive-media'],
       },
     ])
     .disabled(false)
@@ -149,7 +149,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
       type: 'Link',
       validations: [
         {
-          linkContentType: ['c-link', 'c-editorial', 'c-image', 'c-media', 'c-video'],
+          linkContentType: ['c-link', 'c-editorial', 'c-responsive-media'],
         },
       ],
       linkType: 'Entry',
diff --git a/packages/contentful-migrations/ui/1100000000003-create-m-list-migration.js b/packages/contentful-migrations/ui/1100000000002-create-m-list-migration.js
similarity index 96%
rename from packages/contentful-migrations/ui/1100000000003-create-m-list-migration.js
rename to packages/contentful-migrations/ui/1100000000002-create-m-list-migration.js
index 73f680c..230c930 100644
--- a/packages/contentful-migrations/ui/1100000000003-create-m-list-migration.js
+++ b/packages/contentful-migrations/ui/1100000000002-create-m-list-migration.js
@@ -80,7 +80,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
       type: 'Link',
       validations: [
         {
-          linkContentType: ['c-editorial', 'c-image', 'c-media', 'c-video'],
+          linkContentType: ['c-editorial', 'c-responsive-media'],
         },
       ],
       linkType: 'Entry',
diff --git a/packages/contentful-migrations/ui/1100000000004-create-m-columns-migration.js b/packages/contentful-migrations/ui/1100000000003-create-m-columns-migration.js
similarity index 94%
rename from packages/contentful-migrations/ui/1100000000004-create-m-columns-migration.js
rename to packages/contentful-migrations/ui/1100000000003-create-m-columns-migration.js
index 81900bc..f346637 100644
--- a/packages/contentful-migrations/ui/1100000000004-create-m-columns-migration.js
+++ b/packages/contentful-migrations/ui/1100000000003-create-m-columns-migration.js
@@ -91,7 +91,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
       type: 'Link',
       validations: [
         {
-          linkContentType: ['c-editorial', 'c-image', 'c-media', 'c-video'],
+          linkContentType: ['c-editorial', 'c-responsive-media'],
         },
       ],
       linkType: 'Entry',
@@ -116,7 +116,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
       type: 'Link',
       validations: [
         {
-          linkContentType: ['c-editorial', 'c-image', 'c-media', 'c-video'],
+          linkContentType: ['c-editorial', 'c-responsive-media'],
         },
       ],
       linkType: 'Entry',
diff --git a/packages/contentful-migrations/ui/1100000000005-create-m-text-migration.js b/packages/contentful-migrations/ui/1100000000004-create-m-text-migration.js
similarity index 100%
rename from packages/contentful-migrations/ui/1100000000005-create-m-text-migration.js
rename to packages/contentful-migrations/ui/1100000000004-create-m-text-migration.js
diff --git a/packages/contentful-migrations/ui/1100000000006-create-m-hero-migration.js b/packages/contentful-migrations/ui/1100000000005-create-m-hero-migration.js
similarity index 98%
rename from packages/contentful-migrations/ui/1100000000006-create-m-hero-migration.js
rename to packages/contentful-migrations/ui/1100000000005-create-m-hero-migration.js
index 2a3ccc6..15dbcf6 100644
--- a/packages/contentful-migrations/ui/1100000000006-create-m-hero-migration.js
+++ b/packages/contentful-migrations/ui/1100000000005-create-m-hero-migration.js
@@ -110,7 +110,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .required(false)
     .validations([
       {
-        linkContentType: ['c-image', 'c-media'],
+        linkContentType: ['c-responsive-media'],
       },
     ])
     .disabled(false)
diff --git a/packages/contentful-migrations/ui/1100000000007-create-m-media-migration.js b/packages/contentful-migrations/ui/1100000000006-create-m-media-migration.js
similarity index 94%
rename from packages/contentful-migrations/ui/1100000000007-create-m-media-migration.js
rename to packages/contentful-migrations/ui/1100000000006-create-m-media-migration.js
index 1f3b6ee..8be8582 100644
--- a/packages/contentful-migrations/ui/1100000000007-create-m-media-migration.js
+++ b/packages/contentful-migrations/ui/1100000000006-create-m-media-migration.js
@@ -6,7 +6,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
   const mMedia = migration
     .createContentType('m-media')
     .name('Module: Media')
-    .description('Module wrapper for media component')
+    .description('Module container for image, loop video or video player')
     .displayField('internal_name');
 
   mMedia
@@ -75,7 +75,7 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .required(true)
     .validations([
       {
-        linkContentType: ['c-image', 'c-media', 'c-video'],
+        linkContentType: ['c-responsive-media'],
       },
     ])
     .disabled(false)
diff --git a/packages/recipes/c-image/README.md b/packages/recipes/c-image/README.md
new file mode 100644
index 0000000..e67081d
--- /dev/null
+++ b/packages/recipes/c-image/README.md
@@ -0,0 +1,3 @@
+# Image component
+
+> Work in progress
diff --git a/templates/theme-default/assets/scss/components/_c-image.scss b/packages/recipes/c-image/assets/scss/components/_c-image.scss
similarity index 100%
rename from templates/theme-default/assets/scss/components/_c-image.scss
rename to packages/recipes/c-image/assets/scss/components/_c-image.scss
diff --git a/packages/contentful-migrations/ui/1000000000002-create-c-image-migration.js b/packages/recipes/c-image/migrations/1200000000002-create-c-image-migration.js
similarity index 100%
rename from packages/contentful-migrations/ui/1000000000002-create-c-image-migration.js
rename to packages/recipes/c-image/migrations/1200000000002-create-c-image-migration.js
diff --git a/packages/recipes/c-image/partials/components/c-image.html b/packages/recipes/c-image/partials/components/c-image.html
new file mode 100644
index 0000000..57d3c50
--- /dev/null
+++ b/packages/recipes/c-image/partials/components/c-image.html
@@ -0,0 +1,46 @@
+{{- $globals := .globals -}}
+{{- $context := .context | default dict -}}
+{{- $options := .options | default dict -}}
+{{- $params := (merge $context $options) -}}
+{{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
+{{- $class_name := $params.class_name -}}
+{{- $image_mobile := $params.image_mobile -}}
+{{- $image_desktop := $params.image_desktop -}}
+{{- $caption := $params.caption -}}
+
+{{- $has_mobile := false -}}
+{{- $has_desktop := false -}}
+{{- with $image_mobile -}}
+  {{- with .url -}}
+    {{- $has_mobile = true -}}
+  {{- end -}}
+{{- end -}}
+{{- with $image_desktop -}}
+  {{- with .url -}}
+    {{- $has_desktop = true -}}
+  {{- end -}}
+{{- end -}}
+
+<figure class="c-image{{ range $modifier }} c-image--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
+  {{- with $image_mobile -}}
+    {{- partial "utils/asset" (dict
+      "globals" $globals
+      "context" .
+      "options" (merge $params (dict
+        "class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
+      ))
+    ) -}}
+  {{- end -}}
+  {{- with $image_desktop -}}
+    {{- partial "utils/asset" (dict
+      "globals" $globals
+      "context" .
+      "options" (merge $params (dict
+        "class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
+      ))
+    ) -}}
+  {{- end -}}
+  {{- with $caption -}}
+    <figcaption>{{ . }}</figcaption>
+  {{- end -}}
+</figure>
diff --git a/packages/recipes/c-video-player/README.md b/packages/recipes/c-video-player/README.md
new file mode 100644
index 0000000..14987e7
--- /dev/null
+++ b/packages/recipes/c-video-player/README.md
@@ -0,0 +1,3 @@
+# Video player component
+
+> Work in progress
diff --git a/packages/recipes/c-video-player/assets/js/components/video-player.js b/packages/recipes/c-video-player/assets/js/components/video-player.js
new file mode 100644
index 0000000..d884ea2
--- /dev/null
+++ b/packages/recipes/c-video-player/assets/js/components/video-player.js
@@ -0,0 +1,66 @@
+/**
+ * Initialize video player
+ *
+ * @param {HTMLElement} root
+ */
+const init = (root) => {
+  const video = root.querySelector('video');
+  root.classList.add('initialized');
+
+  const showButton = () => root.classList.remove('is-playing');
+  const hideButton = () => root.classList.add('is-playing');
+
+  if (video) {
+    video.addEventListener('playing', () => hideButton());
+    video.addEventListener('pause', () => showButton());
+    video.addEventListener('ended', () => showButton());
+
+    if (video.controls === false) {
+      root.addEventListener('click', () => {
+        if (video.paused) {
+          video.play();
+        } else {
+          video.pause();
+        }
+      });
+    }
+
+    if (video.paused) {
+      root.classList.remove('is-playing');
+    } else {
+      root.classList.add('is-playing');
+    }
+  }
+};
+
+export const initVideoPlayer = (root = document) => {
+  const videos = root.querySelectorAll('.js-video-player:not(.initialized)');
+
+  Array.from(videos).forEach((root) => {
+    init(root);
+  });
+
+  // Lazy loading videos
+  if ('IntersectionObserver' in window) {
+    const lazyVideos = Array.from(document.querySelectorAll('video[loading="lazy"]'));
+    const lazyVideoObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (video) {
+        if (video.isIntersecting) {
+          for (const videoSource of video.target.children) {
+            if (typeof videoSource?.tagName === 'string' && videoSource?.tagName === 'SOURCE') {
+              videoSource.src = videoSource.dataset.src;
+            }
+          }
+
+          video.target.load();
+          video.target.removeAttribute('loading');
+          lazyVideoObserver.unobserve(video.target);
+        }
+      });
+    });
+
+    lazyVideos.forEach(function (lazyVideo) {
+      lazyVideoObserver.observe(lazyVideo);
+    });
+  }
+};
diff --git a/templates/theme-default/assets/scss/components/_c-video.scss b/packages/recipes/c-video-player/assets/scss/components/_c-video-player.scss
similarity index 97%
rename from templates/theme-default/assets/scss/components/_c-video.scss
rename to packages/recipes/c-video-player/assets/scss/components/_c-video-player.scss
index f6f3f14..671e1c7 100644
--- a/templates/theme-default/assets/scss/components/_c-video.scss
+++ b/packages/recipes/c-video-player/assets/scss/components/_c-video-player.scss
@@ -1,4 +1,4 @@
-.c-video {
+.c-video-player {
   $self: &;
 
   cursor: pointer;
diff --git a/packages/contentful-migrations/ui/1000000000008-create-c-video-migration.js b/packages/recipes/c-video-player/migrations/1200000000001-create-c-video-player-migration.js
similarity index 88%
rename from packages/contentful-migrations/ui/1000000000008-create-c-video-migration.js
rename to packages/recipes/c-video-player/migrations/1200000000001-create-c-video-player-migration.js
index cfdcdaf..9184c6c 100644
--- a/packages/contentful-migrations/ui/1000000000008-create-c-video-migration.js
+++ b/packages/recipes/c-video-player/migrations/1200000000001-create-c-video-player-migration.js
@@ -4,9 +4,9 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
   const defaultLocale = await helpers.locale.getDefaultLocale();
 
   const cVideo = migration
-    .createContentType('c-video')
-    .name('Component: Video')
-    .description('Add a video from Contentful or an external source like youtube to your site')
+    .createContentType('c-video-player')
+    .name('Component: Video player')
+    .description('A video player which can play videos from Contentful, YouTube or Vimeo.')
     .displayField('internal_name');
 
   cVideo
@@ -59,16 +59,6 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
     .omitted(false)
     .linkType('Asset');
 
-  cVideo
-    .createField('caption')
-    .name('Caption')
-    .type('Text')
-    .localized(false)
-    .required(false)
-    .validations([])
-    .disabled(false)
-    .omitted(false);
-
   cVideo
     .createField('track')
     .name('Text track')
@@ -142,8 +132,6 @@ module.exports = withHelpers(async (migration, _context, helpers) => {
 
   cVideo.changeFieldControl('poster', 'builtin', 'assetLinkEditor', {});
 
-  cVideo.changeFieldControl('caption', 'builtin', 'multipleLine', {});
-
   cVideo.changeFieldControl('track', 'builtin', 'assetLinkEditor', {
     helpText: 'Simple text file containing the actual subtitle data in the WebVTT format.',
     showLinkEntityAction: true,
diff --git a/packages/recipes/c-video-player/partials/c-video-player.html b/packages/recipes/c-video-player/partials/c-video-player.html
new file mode 100644
index 0000000..0617bf3
--- /dev/null
+++ b/packages/recipes/c-video-player/partials/c-video-player.html
@@ -0,0 +1,116 @@
+{{- $globals := .globals -}}
+{{- $context := .context | default dict -}}
+{{- $options := .options | default dict -}}
+{{- $params := (merge $context $options) -}}
+{{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
+{{- $class_name := $params.class_name -}}
+
+{{- $asset := $params.asset -}}
+{{- $src := $params.src -}}
+{{- $loop := $params.loop -}}
+{{- $poster_asset := $params.poster -}}
+{{- $controls := $params.controls -}}
+{{- $muted := $params.muted -}}
+{{- $autoplay := $params.autoplay -}}
+{{- $ratio := $params.ratio | default "16:9" -}}
+{{- $nocookie := $params.nocookie | default true -}}
+{{- $playicon := $params.playicon | default (dict "id" "play") -}}
+
+{{- $poster_src := false -}}
+{{- with $poster_asset -}}
+  {{- with .src }}
+      {{- $poster_src = . -}}
+  {{- end -}}
+{{- end -}}
+
+<div class="c-video-player{{ range $modifier }} c-video-player--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}{{ with $ratio }} o-ratio o-ratio--{{ . }}{{ end }} js-video-player">
+  {{- with $asset -}}
+    {{- partial "utils/asset" (dict
+      "context" .
+      "globals" $globals
+      "options" (dict
+        "loop" $loop
+        "controls" $controls
+        "muted" $muted
+        "autoplay" $autoplay
+        "poster" $poster_src
+        "class_name" (print "c-video-player__asset" (cond (partial "utils/reflect/is-string" $ratio) " o-ratio__content" ""))
+      )
+    ) -}}
+    {{- with $poster_asset -}}
+      <div class="c-video-player__poster{{ with $ratio }} o-ratio__content{{ end}}">
+        {{- partial "utils/asset" (dict
+          "context" .
+          "globals" $globals
+        ) -}}
+        {{ with $playicon }}
+          {{- partial "utils/svg/icon" (dict
+            "globals" $globals
+            "context" .
+            "options" (dict
+              "class_name" "c-video-player__play-icon"
+              "inline" true
+              "sprite" false
+              "width" 64
+              "height" 64
+            )
+          ) }}
+        {{ end }}
+      </div>
+    {{- end -}}
+  {{- else -}}
+    {{- with $src -}}
+      {{/* Render YouTube iFrame player */}}
+      {{- if or (in . "youtube") (in . "youtu.be") -}}
+        {{- partial "components/c-video-player/embed-youtube" (dict
+          "context" $params
+          "globals" $globals
+        ) -}}
+
+      {{/* Render Vimeo iFrame player */}}
+      {{- else if in . "vimeo" -}}
+        {{- partial "components/c-video-player/embed-vimeo" (dict
+          "context" $params
+          "globals" $globals
+        ) -}}
+
+      {{/* Render video tag */}}
+      {{- else -}}
+        {{- with partial "utils/html/tag" (dict "name" "video" "attr" (dict
+          "src" .
+          "class" (print "c-video-player__asset" (cond (partial "utils/reflect/is-string" $ratio) " o-ratio__content" ""))
+          "loop" $loop
+          "controls" $controls
+          "muted" $muted
+          "autoplay" $autoplay
+          "poster" $poster_src
+        )) -}}
+          {{- . | safeHTML -}}
+        {{- end -}}
+
+        {{- with $poster_asset -}}
+          <div class="c-video-player__poster{{ with $ratio }} o-ratio__content{{ end}}">
+            {{- partial "utils/asset" (dict
+              "context" .
+              "globals" $globals
+            ) -}}
+            {{ with $playicon }}
+              {{- partial "utils/svg/icon" (dict
+                "globals" $globals
+                "context" .
+                "options" (dict
+                  "class_name" "c-video-player__play-icon"
+                  "inline" true
+                  "sprite" false
+                  "width" 64
+                  "height" 64
+                )
+              ) }}
+            {{ end }}
+          </div>
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+</div>
+
diff --git a/templates/theme-default/layouts/partials/components/c-video/embed-srcdoc.html b/packages/recipes/c-video-player/partials/components/c-video-player/embed-srcdoc.html
similarity index 100%
rename from templates/theme-default/layouts/partials/components/c-video/embed-srcdoc.html
rename to packages/recipes/c-video-player/partials/components/c-video-player/embed-srcdoc.html
diff --git a/templates/theme-default/layouts/partials/components/c-video/embed-vimeo.html b/packages/recipes/c-video-player/partials/components/c-video-player/embed-vimeo.html
similarity index 100%
rename from templates/theme-default/layouts/partials/components/c-video/embed-vimeo.html
rename to packages/recipes/c-video-player/partials/components/c-video-player/embed-vimeo.html
diff --git a/templates/theme-default/layouts/partials/components/c-video/embed-youtube.html b/packages/recipes/c-video-player/partials/components/c-video-player/embed-youtube.html
similarity index 100%
rename from templates/theme-default/layouts/partials/components/c-video/embed-youtube.html
rename to packages/recipes/c-video-player/partials/components/c-video-player/embed-youtube.html
diff --git a/templates/app/.storybook/main.js b/templates/app/.storybook/main.js
index 2f66917..9e70d62 100644
--- a/templates/app/.storybook/main.js
+++ b/templates/app/.storybook/main.js
@@ -34,10 +34,12 @@ module.exports = {
       '@public': path.resolve(__dirname, '../public'),
       '@docs': path.resolve(__dirname, '../docs/contentful'),
       '/fonts': path.resolve(__dirname, '../public/fonts'),
+      '/img': path.resolve(__dirname, '../public/img'),
+      '/videos': path.resolve(__dirname, '../public/videos'),
     };
     config.plugins.push(
       new CopyWebpackPlugin({
-        patterns: ['css', 'js', 'fonts']
+        patterns: ['css', 'js', 'fonts', 'img', 'videos']
           .map((dir) => ({
             from: path.resolve(__dirname, `../public/${dir}`),
             to: dir,
diff --git a/templates/app/config/storybook/config.yaml b/templates/app/config/storybook/config.yaml
index fad5845..f284c0a 100644
--- a/templates/app/config/storybook/config.yaml
+++ b/templates/app/config/storybook/config.yaml
@@ -1,4 +1,7 @@
 contentDir: content/storybook
+staticDir:
+  - static
+  - static-storybook
 ignoreFiles: []
 disableKinds:
   - taxonomy
diff --git a/templates/app/contentful-ssg.config.ts b/templates/app/contentful-ssg.config.ts
index 7f0fb9a..80392bc 100644
--- a/templates/app/contentful-ssg.config.ts
+++ b/templates/app/contentful-ssg.config.ts
@@ -18,11 +18,28 @@ const config: Config = {
       '@jungvonmatt/cssg-plugin-assets',
       {
         ratios: {
-          default: { square: 1 / 1, landscape: 16 / 9, portrait: 3 / 4, rectangle: 4 / 3 },
+          default: {
+            '1x1': 1,
+            '16x9': 16 / 9,
+            '9x16': 9 / 16,
+            '3x4': 3 / 4,
+            '4x3': 4 / 3,
+          },
+        },
+        focusAreas: {
+          contentTypes: {
+            'c-responsive-media': {
+              default: 'center',
+              fields: {
+                mobile_media: 'field:mobile_focus_area',
+                desktop_media: 'field:desktop_focus_area',
+              },
+            }
+          },
         },
         // Uncomment line to auto-generate poster images for video files
         // generatePosterImages: true,
-        // Uncomment line to download assets from contentful
+        // Uncomment line to download assets from Contentful
         // download: true,
       },
     ],
@@ -30,3 +47,10 @@ const config: Config = {
 };
 
 export default config;
+
+
+// config: {
+//   default: 'field:a',
+//   contentTypes: { ct: { default: 'field:b', fields: { media: 'field:c' } } },
+// },
+// fields: { a: 'bottom', b: 'right', c: 'top_right' },
diff --git a/templates/app/static-storybook/img/image-16x9.avif b/templates/app/static-storybook/img/image-16x9.avif
new file mode 100644
index 0000000..3fa8b4b
Binary files /dev/null and b/templates/app/static-storybook/img/image-16x9.avif differ
diff --git a/templates/app/static-storybook/img/image-16x9.jpeg b/templates/app/static-storybook/img/image-16x9.jpeg
new file mode 100644
index 0000000..27250af
Binary files /dev/null and b/templates/app/static-storybook/img/image-16x9.jpeg differ
diff --git a/templates/app/static-storybook/img/image-16x9.webp b/templates/app/static-storybook/img/image-16x9.webp
new file mode 100644
index 0000000..a0199a2
Binary files /dev/null and b/templates/app/static-storybook/img/image-16x9.webp differ
diff --git a/templates/app/static-storybook/img/image-1x1.jpeg b/templates/app/static-storybook/img/image-1x1.jpeg
new file mode 100644
index 0000000..c114b60
Binary files /dev/null and b/templates/app/static-storybook/img/image-1x1.jpeg differ
diff --git a/templates/app/static-storybook/img/image-1x1.webp b/templates/app/static-storybook/img/image-1x1.webp
new file mode 100644
index 0000000..fd60d29
Binary files /dev/null and b/templates/app/static-storybook/img/image-1x1.webp differ
diff --git a/templates/app/static-storybook/img/image-3x4.avif b/templates/app/static-storybook/img/image-3x4.avif
new file mode 100644
index 0000000..d081de7
Binary files /dev/null and b/templates/app/static-storybook/img/image-3x4.avif differ
diff --git a/templates/app/static-storybook/img/image-3x4.jpeg b/templates/app/static-storybook/img/image-3x4.jpeg
new file mode 100644
index 0000000..8bf473b
Binary files /dev/null and b/templates/app/static-storybook/img/image-3x4.jpeg differ
diff --git a/templates/app/static-storybook/img/image-3x4.webp b/templates/app/static-storybook/img/image-3x4.webp
new file mode 100644
index 0000000..e76c1bb
Binary files /dev/null and b/templates/app/static-storybook/img/image-3x4.webp differ
diff --git a/templates/app/static-storybook/img/image-4x3.avif b/templates/app/static-storybook/img/image-4x3.avif
new file mode 100644
index 0000000..e34b889
Binary files /dev/null and b/templates/app/static-storybook/img/image-4x3.avif differ
diff --git a/templates/app/static-storybook/img/image-4x3.jpeg b/templates/app/static-storybook/img/image-4x3.jpeg
new file mode 100644
index 0000000..d5626a6
Binary files /dev/null and b/templates/app/static-storybook/img/image-4x3.jpeg differ
diff --git a/templates/app/static-storybook/img/image-4x3.webp b/templates/app/static-storybook/img/image-4x3.webp
new file mode 100644
index 0000000..865fb46
Binary files /dev/null and b/templates/app/static-storybook/img/image-4x3.webp differ
diff --git a/templates/app/static-storybook/img/image-9x16.avif b/templates/app/static-storybook/img/image-9x16.avif
new file mode 100644
index 0000000..544ba28
Binary files /dev/null and b/templates/app/static-storybook/img/image-9x16.avif differ
diff --git a/templates/app/static-storybook/img/image-9x16.jpeg b/templates/app/static-storybook/img/image-9x16.jpeg
new file mode 100644
index 0000000..6bc7f9d
Binary files /dev/null and b/templates/app/static-storybook/img/image-9x16.jpeg differ
diff --git a/templates/app/static-storybook/img/image-9x16.webp b/templates/app/static-storybook/img/image-9x16.webp
new file mode 100644
index 0000000..7050aed
Binary files /dev/null and b/templates/app/static-storybook/img/image-9x16.webp differ
diff --git a/templates/app/static-storybook/img/image.avif b/templates/app/static-storybook/img/image.avif
new file mode 100644
index 0000000..e3ee61e
Binary files /dev/null and b/templates/app/static-storybook/img/image.avif differ
diff --git a/templates/app/static-storybook/img/video-16x9-poster.avif b/templates/app/static-storybook/img/video-16x9-poster.avif
new file mode 100644
index 0000000..38bef85
Binary files /dev/null and b/templates/app/static-storybook/img/video-16x9-poster.avif differ
diff --git a/templates/app/static-storybook/img/video-16x9-poster.jpeg b/templates/app/static-storybook/img/video-16x9-poster.jpeg
new file mode 100644
index 0000000..f5ced42
Binary files /dev/null and b/templates/app/static-storybook/img/video-16x9-poster.jpeg differ
diff --git a/templates/app/static-storybook/img/video-16x9-poster.webp b/templates/app/static-storybook/img/video-16x9-poster.webp
new file mode 100644
index 0000000..9a7b588
Binary files /dev/null and b/templates/app/static-storybook/img/video-16x9-poster.webp differ
diff --git a/templates/app/static-storybook/img/video-1x1-poster.avif b/templates/app/static-storybook/img/video-1x1-poster.avif
new file mode 100644
index 0000000..f8f74d0
Binary files /dev/null and b/templates/app/static-storybook/img/video-1x1-poster.avif differ
diff --git a/templates/app/static-storybook/img/video-1x1-poster.jpeg b/templates/app/static-storybook/img/video-1x1-poster.jpeg
new file mode 100644
index 0000000..e732808
Binary files /dev/null and b/templates/app/static-storybook/img/video-1x1-poster.jpeg differ
diff --git a/templates/app/static-storybook/img/video-1x1-poster.webp b/templates/app/static-storybook/img/video-1x1-poster.webp
new file mode 100644
index 0000000..a827eb2
Binary files /dev/null and b/templates/app/static-storybook/img/video-1x1-poster.webp differ
diff --git a/templates/app/static-storybook/img/video-3x4-poster.avif b/templates/app/static-storybook/img/video-3x4-poster.avif
new file mode 100644
index 0000000..e4a36cf
Binary files /dev/null and b/templates/app/static-storybook/img/video-3x4-poster.avif differ
diff --git a/templates/app/static-storybook/img/video-3x4-poster.jpeg b/templates/app/static-storybook/img/video-3x4-poster.jpeg
new file mode 100644
index 0000000..e2a6cac
Binary files /dev/null and b/templates/app/static-storybook/img/video-3x4-poster.jpeg differ
diff --git a/templates/app/static-storybook/img/video-3x4-poster.webp b/templates/app/static-storybook/img/video-3x4-poster.webp
new file mode 100644
index 0000000..7d5d01a
Binary files /dev/null and b/templates/app/static-storybook/img/video-3x4-poster.webp differ
diff --git a/templates/app/static-storybook/img/video-4x3-poster.avif b/templates/app/static-storybook/img/video-4x3-poster.avif
new file mode 100644
index 0000000..43d6693
Binary files /dev/null and b/templates/app/static-storybook/img/video-4x3-poster.avif differ
diff --git a/templates/app/static-storybook/img/video-4x3-poster.jpeg b/templates/app/static-storybook/img/video-4x3-poster.jpeg
new file mode 100644
index 0000000..de97805
Binary files /dev/null and b/templates/app/static-storybook/img/video-4x3-poster.jpeg differ
diff --git a/templates/app/static-storybook/img/video-4x3-poster.webp b/templates/app/static-storybook/img/video-4x3-poster.webp
new file mode 100644
index 0000000..58f7681
Binary files /dev/null and b/templates/app/static-storybook/img/video-4x3-poster.webp differ
diff --git a/templates/app/static-storybook/img/video-9x16-poster.avif b/templates/app/static-storybook/img/video-9x16-poster.avif
new file mode 100644
index 0000000..ad1548d
Binary files /dev/null and b/templates/app/static-storybook/img/video-9x16-poster.avif differ
diff --git a/templates/app/static-storybook/img/video-9x16-poster.jpeg b/templates/app/static-storybook/img/video-9x16-poster.jpeg
new file mode 100644
index 0000000..fd02848
Binary files /dev/null and b/templates/app/static-storybook/img/video-9x16-poster.jpeg differ
diff --git a/templates/app/static-storybook/img/video-9x16-poster.webp b/templates/app/static-storybook/img/video-9x16-poster.webp
new file mode 100644
index 0000000..0d8719e
Binary files /dev/null and b/templates/app/static-storybook/img/video-9x16-poster.webp differ
diff --git a/templates/app/static-storybook/videos/video-16x9.mp4 b/templates/app/static-storybook/videos/video-16x9.mp4
new file mode 100644
index 0000000..a09c82c
Binary files /dev/null and b/templates/app/static-storybook/videos/video-16x9.mp4 differ
diff --git a/templates/app/static-storybook/videos/video-1x1.mp4 b/templates/app/static-storybook/videos/video-1x1.mp4
new file mode 100644
index 0000000..c1a70bf
Binary files /dev/null and b/templates/app/static-storybook/videos/video-1x1.mp4 differ
diff --git a/templates/app/static-storybook/videos/video-3x4.mp4 b/templates/app/static-storybook/videos/video-3x4.mp4
new file mode 100644
index 0000000..b131d8f
Binary files /dev/null and b/templates/app/static-storybook/videos/video-3x4.mp4 differ
diff --git a/templates/app/static-storybook/videos/video-4x3.mp4 b/templates/app/static-storybook/videos/video-4x3.mp4
new file mode 100644
index 0000000..2679194
Binary files /dev/null and b/templates/app/static-storybook/videos/video-4x3.mp4 differ
diff --git a/templates/app/static-storybook/videos/video-9x16.mp4 b/templates/app/static-storybook/videos/video-9x16.mp4
new file mode 100644
index 0000000..94f99d5
Binary files /dev/null and b/templates/app/static-storybook/videos/video-9x16.mp4 differ
diff --git a/templates/theme-default/assets/js/components/video.js b/templates/theme-default/assets/js/components/video.js
index 1385f7c..26f3010 100644
--- a/templates/theme-default/assets/js/components/video.js
+++ b/templates/theme-default/assets/js/components/video.js
@@ -1,66 +1,74 @@
+import isHidden from '../utils/visibility';
+
 /**
- * Initialize video player
+ * Initialize video
  *
  * @param {HTMLElement} root
  */
-const init = (root) => {
-  const video = root.querySelector('video');
-  root.classList.add('initialized');
+const init = (element) => {
+  element.dataset.video = 'initialized';
+
+  const video = element.querySelector('video');
+
+  let loaded = false;
+
+  function loadVideoSources() {
+    Array.from(video.children).forEach((videoSource) => {
+      if (typeof videoSource.tagName === 'string' && videoSource.tagName === 'SOURCE') {
+        videoSource.src = videoSource.dataset.src;
+      }
+    });
 
-  const showButton = () => root.classList.remove('is-playing');
-  const hideButton = () => root.classList.add('is-playing');
+    video.load();
+  }
 
-  if (video) {
-    video.addEventListener('playing', () => hideButton());
-    video.addEventListener('pause', () => showButton());
-    video.addEventListener('ended', () => showButton());
+  function isPlaying() {
+    return Boolean(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
+  }
 
-    if (video.controls === false) {
-      root.addEventListener('click', () => {
-        if (video.paused) {
-          video.play();
-        } else {
-          video.pause();
-        }
-      });
+  function playVideo() {
+    if (!isPlaying()) {
+      video.play();
     }
+  }
 
-    if (video.paused) {
-      root.classList.remove('is-playing');
-    } else {
-      root.classList.add('is-playing');
+  function pauseVideo() {
+    if (isPlaying()) {
+      video.pause();
     }
   }
+
+  function observerCallback(entries) {
+    entries.forEach((entry) => {
+      // Break if video is hidden
+      if (isHidden()) {
+        return;
+      }
+
+      // Load sources
+      if (!loaded && entry.isIntersecting) {
+        loadVideoSources();
+        loaded = true;
+      }
+
+      // Start or pause playback depending on the visibility
+      if (entry.intersectionRatio === 0) {
+        pauseVideo();
+      } else {
+        playVideo();
+      }
+    });
+  }
+
+  // Observe the visiblity of the video element
+  const observer = new IntersectionObserver(observerCallback, { threshold: [0, 0.01] });
+  observer.observe(video);
 };
 
 export const initVideo = (root = document) => {
-  const videos = root.querySelectorAll('.js-video:not(.initialized)');
+  const videos = root.querySelectorAll('[data-video]:not([data-video="initialized"])');
 
   Array.from(videos).forEach((root) => {
     init(root);
   });
-
-  // Lazy loading videos
-  if ('IntersectionObserver' in window) {
-    const lazyVideos = Array.from(document.querySelectorAll('video[loading="lazy"]'));
-    const lazyVideoObserver = new IntersectionObserver(function (entries) {
-      entries.forEach(function (video) {
-        if (video.isIntersecting) {
-          for (const videoSource of video.target.children) {
-            if (typeof videoSource?.tagName === 'string' && videoSource?.tagName === 'SOURCE') {
-              videoSource.src = videoSource.dataset.src;
-            }
-          }
-
-          video.target.load();
-          video.target.removeAttribute('loading');
-          lazyVideoObserver.unobserve(video.target);
-        }
-      });
-    });
-
-    lazyVideos.forEach(function (lazyVideo) {
-      lazyVideoObserver.observe(lazyVideo);
-    });
-  }
 };
diff --git a/templates/theme-default/assets/js/utils/visibility.js b/templates/theme-default/assets/js/utils/visibility.js
new file mode 100644
index 0000000..70fd76f
--- /dev/null
+++ b/templates/theme-default/assets/js/utils/visibility.js
@@ -0,0 +1,8 @@
+export default function isHidden(element) {
+  /**
+   * The offsetParent property will return null whenever it or
+   * any of its parents is hidden via the display style property.
+   * Just make sure that the element isn't fixed.
+   */
+  return element.offsetParent === null;
+}
diff --git a/templates/theme-default/assets/scss/components/_c-media.scss b/templates/theme-default/assets/scss/components/_c-media.scss
deleted file mode 100644
index 3c916f3..0000000
--- a/templates/theme-default/assets/scss/components/_c-media.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.c-media {
-  img,
-  video,
-  svg {
-    vertical-align: top;
-  }
-}
diff --git a/templates/theme-default/assets/scss/components/_c-responsive-media.scss b/templates/theme-default/assets/scss/components/_c-responsive-media.scss
new file mode 100644
index 0000000..2e0b309
--- /dev/null
+++ b/templates/theme-default/assets/scss/components/_c-responsive-media.scss
@@ -0,0 +1,31 @@
+.c-responsive-media {
+
+  &__container {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__image {
+    img,
+    svg {
+      vertical-align: top;
+      // max-width: 100%;
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  &__video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    video {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/templates/theme-default/assets/scss/main.scss b/templates/theme-default/assets/scss/main.scss
index bf8d254..806831e 100644
--- a/templates/theme-default/assets/scss/main.scss
+++ b/templates/theme-default/assets/scss/main.scss
@@ -22,12 +22,11 @@
 @import "components/c-link";
 @import "components/c-headline";
 @import "components/c-icon";
-@import "components/c-image";
-@import "components/c-media";
+
+@import "components/c-responsive-media";
 @import "components/c-editorial";
 @import "components/c-text";
 @import "components/c-menu";
-@import "components/c-video";
 
 // 7. Modules
 @import "modules/m-footer";
diff --git a/templates/theme-default/content/stories/c-image/with-mobile-and-desktop-src.md b/templates/theme-default/content/stories/c-image/with-mobile-and-desktop-src.md
deleted file mode 100644
index e6f2c33..0000000
--- a/templates/theme-default/content/stories/c-image/with-mobile-and-desktop-src.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: with-mobile-and-desktop-src
-    content_type: c-image
-
----
diff --git a/templates/theme-default/content/stories/c-image/with-mobile-src.md b/templates/theme-default/content/stories/c-image/with-mobile-src.md
deleted file mode 100644
index ccda9cc..0000000
--- a/templates/theme-default/content/stories/c-image/with-mobile-src.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-type: storybook
-includeInDocs: false
-partials:
-  - id: with-mobile-src
-    content_type: c-image
-
----
diff --git a/templates/theme-default/content/stories/c-media/_index.md b/templates/theme-default/content/stories/c-media/_index.md
deleted file mode 100644
index 42443d6..0000000
--- a/templates/theme-default/content/stories/c-media/_index.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-type: storybook
----
diff --git a/templates/theme-default/content/stories/c-media/default.md b/templates/theme-default/content/stories/c-media/default.md
deleted file mode 100644
index 0cf0b7b..0000000
--- a/templates/theme-default/content/stories/c-media/default.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: default
-    content_type: c-media
-
----
diff --git a/templates/theme-default/content/stories/c-image/_index.md b/templates/theme-default/content/stories/c-responsive-media/_index.md
similarity index 100%
rename from templates/theme-default/content/stories/c-image/_index.md
rename to templates/theme-default/content/stories/c-responsive-media/_index.md
diff --git a/templates/theme-default/content/stories/c-responsive-media/different-image-ratios.md b/templates/theme-default/content/stories/c-responsive-media/different-image-ratios.md
new file mode 100644
index 0000000..e6207a5
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/different-image-ratios.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: different-image-ratios
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-responsive-media/different-video-ratios.md b/templates/theme-default/content/stories/c-responsive-media/different-video-ratios.md
new file mode 100644
index 0000000..cedeffd
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/different-video-ratios.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: different-video-ratios
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-responsive-media/mobile-image-and-desktop-video.md b/templates/theme-default/content/stories/c-responsive-media/mobile-image-and-desktop-video.md
new file mode 100644
index 0000000..dc8bd6c
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/mobile-image-and-desktop-video.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: mobile-image-and-desktop-video
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-responsive-media/mobile-image-only.md b/templates/theme-default/content/stories/c-responsive-media/mobile-image-only.md
new file mode 100644
index 0000000..0a25460
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/mobile-image-only.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: mobile-image-only
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-responsive-media/mobile-video-only.md b/templates/theme-default/content/stories/c-responsive-media/mobile-video-only.md
new file mode 100644
index 0000000..080d190
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/mobile-video-only.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: mobile-video-only
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-responsive-media/video-url-broken.md b/templates/theme-default/content/stories/c-responsive-media/video-url-broken.md
new file mode 100644
index 0000000..20e14f4
--- /dev/null
+++ b/templates/theme-default/content/stories/c-responsive-media/video-url-broken.md
@@ -0,0 +1,7 @@
+---
+type: storybook
+includeInDocs: true
+partials:
+  - id: video-not-available
+    content_type: c-responsive-media
+---
diff --git a/templates/theme-default/content/stories/c-video/_index.md b/templates/theme-default/content/stories/c-video/_index.md
deleted file mode 100644
index 6fe6539..0000000
--- a/templates/theme-default/content/stories/c-video/_index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-type: storybook
----
-
-
diff --git a/templates/theme-default/content/stories/c-video/default.md b/templates/theme-default/content/stories/c-video/default.md
deleted file mode 100644
index a0730dc..0000000
--- a/templates/theme-default/content/stories/c-video/default.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: default
-    content_type: c-video
-
-argtypes:
-  muted:
-    name: "Muted"
-    control:
-      type: "boolean"
-  loop:
-    name: "Loop"
-    control:
-      type: "boolean"
-  controls:
-    name: "Controls"
-    control:
-      type: "boolean"
-  autoplay:
-    name: "Autoplay"
-    control:
-      type: "boolean"
----
-
-
-
diff --git a/templates/theme-default/content/stories/c-video/external.md b/templates/theme-default/content/stories/c-video/external.md
deleted file mode 100644
index 231ce64..0000000
--- a/templates/theme-default/content/stories/c-video/external.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: external
-    content_type: c-video
-
-
----
-
-
-
diff --git a/templates/theme-default/content/stories/c-video/vimeo.md b/templates/theme-default/content/stories/c-video/vimeo.md
deleted file mode 100644
index eee3e58..0000000
--- a/templates/theme-default/content/stories/c-video/vimeo.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: vimeo
-    content_type: c-video
-
-argtypes:
-  muted:
-    name: "Muted"
-    control:
-      type: "boolean"
-  loop:
-    name: "Loop"
-    control:
-      type: "boolean"
-  controls:
-    name: "Controls"
-    control:
-      type: "boolean"
-  autoplay:
-    name: "Autoplay"
-    control:
-      type: "boolean"
----
-
-
-
diff --git a/templates/theme-default/content/stories/c-video/youtube.md b/templates/theme-default/content/stories/c-video/youtube.md
deleted file mode 100644
index 92b0a28..0000000
--- a/templates/theme-default/content/stories/c-video/youtube.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-type: storybook
-includeInDocs: true
-partials:
-  - id: youtube
-    content_type: c-video
-
-argtypes:
-  muted:
-    name: "Muted"
-    control:
-      type: "boolean"
-  loop:
-    name: "Loop"
-    control:
-      type: "boolean"
-  controls:
-    name: "Controls"
-    control:
-      type: "boolean"
-  autoplay:
-    name: "Autoplay"
-    control:
-      type: "boolean"
----
-
-
-
diff --git a/templates/theme-default/data/c-editorial/default.yaml b/templates/theme-default/data/c-editorial/default.yaml
index 0d9a36a..a182715 100644
--- a/templates/theme-default/data/c-editorial/default.yaml
+++ b/templates/theme-default/data/c-editorial/default.yaml
@@ -43,7 +43,7 @@ text:
   node_type: document
 media:
   id: default
-  content_type: c-media
+  content_type: c-responsive-media
 links:
   - id: button
     content_type: c-link
diff --git a/templates/theme-default/data/c-image/with-mobile-and-desktop-src.yaml b/templates/theme-default/data/c-image/with-mobile-and-desktop-src.yaml
deleted file mode 100644
index d38a3eb..0000000
--- a/templates/theme-default/data/c-image/with-mobile-and-desktop-src.yaml
+++ /dev/null
@@ -1,14 +0,0 @@
-image_mobile:
-  mime_type: image/jpeg
-  url: https://placeimg.com/480/640/any
-  title: Image (mobile src) title lorem ipsum dolor
-  description: Image (mobile src) description lorem ipsum dolor
-  width: 480
-  height: 640
-image_desktop:
-  mime_type: image/jpeg
-  url: https://placeimg.com/640/480/any
-  title: Image (desktop src) title lorem ipsum dolor
-  description: Image (desktop src) description lorem ipsum dolor
-  width: 640
-  height: 480
diff --git a/templates/theme-default/data/c-image/with-mobile-src.yaml b/templates/theme-default/data/c-image/with-mobile-src.yaml
deleted file mode 100644
index 90e1467..0000000
--- a/templates/theme-default/data/c-image/with-mobile-src.yaml
+++ /dev/null
@@ -1,8 +0,0 @@
-image_mobile:
-  mime_type: image/jpeg
-  url: https://placeimg.com/480/640/any
-  title: Image (mobile and desktop) title lorem ipsum dolor
-  description: Image (mobile and desktop) description lorem ipsum dolor
-  width: 480
-  height: 640
-alt_text: Alt text lorem ipsum dolor
diff --git a/templates/theme-default/data/c-media/default.yaml b/templates/theme-default/data/c-media/default.yaml
deleted file mode 100644
index 5032a63..0000000
--- a/templates/theme-default/data/c-media/default.yaml
+++ /dev/null
@@ -1,207 +0,0 @@
-sys:
-  id: 3EmxGcC0C9t3eB5i74WEGP
-  content_type: c-media
-  created_at: '2021-12-16T08:51:38.025Z'
-  updated_at: '2021-12-16T08:51:38.025Z'
-name: Test Media
-alt: Test Media Alt
-caption: Test Media Caption
-media:
-  mime_type: image/jpeg
-  url: >-
-    //images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg
-  title: image-1-3x4
-  description: ''
-  width: 1836
-  height: 2448
-  file_size: 444731
-  derivatives:
-    original:
-      width: 1836
-      height: 2448
-      sizes: '(max-width: 1836px) 100vw, 1836px'
-      srcsets:
-        - type: image/webp
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1836&q=80&fm=webp
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1280&q=80&fm=webp
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=640&q=80&fm=webp
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=320&q=80&fm=webp
-            320w
-        - type: image/avif
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1836&q=80&fm=avif
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1280&q=80&fm=avif
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=640&q=80&fm=avif
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=320&q=80&fm=avif
-            320w
-        - type: image/jpeg
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1836&q=80
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1280&q=80
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=640&q=80
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=320&q=80
-            320w
-      src: >-
-        https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?w=1836&q=80
-    square:
-      width: 1836
-      height: 1836
-      sizes: '(max-width: 1836px) 100vw, 1836px'
-      srcsets:
-        - type: image/webp
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1836&f=center&q=80&fm=webp
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1280&f=center&q=80&fm=webp
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=640&f=center&q=80&fm=webp
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=320&f=center&q=80&fm=webp
-            320w
-        - type: image/avif
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1836&f=center&q=80&fm=avif
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1280&f=center&q=80&fm=avif
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=640&f=center&q=80&fm=avif
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=320&f=center&q=80&fm=avif
-            320w
-        - type: image/jpeg
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1836&f=center&q=80
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1280&f=center&q=80
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=640&f=center&q=80
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=320&f=center&q=80
-            320w
-      src: >-
-        https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1836&f=center&q=80
-    hd:
-      width: 1836
-      height: 1033
-      sizes: '(max-width: 1836px) 100vw, 1836px'
-      srcsets:
-        - type: image/webp
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1032&f=center&q=80&fm=webp
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=720&f=center&q=80&fm=webp
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=360&f=center&q=80&fm=webp
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=180&f=center&q=80&fm=webp
-            320w
-        - type: image/avif
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1032&f=center&q=80&fm=avif
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=720&f=center&q=80&fm=avif
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=360&f=center&q=80&fm=avif
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=180&f=center&q=80&fm=avif
-            320w
-        - type: image/jpeg
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1032&f=center&q=80
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=720&f=center&q=80
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=360&f=center&q=80
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=180&f=center&q=80
-            320w
-      src: >-
-        https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1032&f=center&q=80
-    rectangle:
-      width: 1836
-      height: 1377
-      sizes: '(max-width: 1836px) 100vw, 1836px'
-      srcsets:
-        - type: image/webp
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1377&f=center&q=80&fm=webp
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=960&f=center&q=80&fm=webp
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=480&f=center&q=80&fm=webp
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=240&f=center&q=80&fm=webp
-            320w
-        - type: image/avif
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1377&f=center&q=80&fm=avif
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=960&f=center&q=80&fm=avif
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=480&f=center&q=80&fm=avif
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=240&f=center&q=80&fm=avif
-            320w
-        - type: image/jpeg
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1377&f=center&q=80
-            1836w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=960&f=center&q=80
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=480&f=center&q=80
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=240&f=center&q=80
-            320w
-      src: >-
-        https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1836&h=1377&f=center&q=80
-    portrait:
-      width: 1632
-      height: 2448
-      sizes: '(max-width: 1632px) 100vw, 1632px'
-      srcsets:
-        - type: image/webp
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1632&h=2448&f=center&q=80&fm=webp
-            1632w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1920&f=center&q=80&fm=webp
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=960&f=center&q=80&fm=webp
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=480&f=center&q=80&fm=webp
-            320w
-        - type: image/avif
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1632&h=2448&f=center&q=80&fm=avif
-            1632w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1920&f=center&q=80&fm=avif
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=960&f=center&q=80&fm=avif
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=480&f=center&q=80&fm=avif
-            320w
-        - type: image/jpeg
-          srcset: >-
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1632&h=2448&f=center&q=80
-            1632w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1280&h=1920&f=center&q=80
-            1280w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=640&h=960&f=center&q=80
-            640w,
-            https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=320&h=480&f=center&q=80
-            320w
-      src: >-
-        https://images.ctfassets.net/jnaeogay42m9/1G5AwbuUgFleaN8ixcI9RM/28e3546e247daa7b413533e0eb80d195/aj-McsNra2VRQQ-unsplash.jpg?fit=fill&w=1632&h=2448&f=center&q=80
-mobile_ratio: square
-desktop_ratio: rectangle
-focus_area: center
-lazy: true
diff --git a/templates/theme-default/data/c-responsive-media/different-image-ratios.yaml b/templates/theme-default/data/c-responsive-media/different-image-ratios.yaml
new file mode 100644
index 0000000..db1ceb7
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/different-image-ratios.yaml
@@ -0,0 +1,94 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: image/jpeg
+  url: /img/image-9x16.jpeg
+  title: Mobile media title
+  description: Mobile media description
+  width: 1080
+  height: 1920
+  derivatives:
+    original:
+      width: 1080
+      height: 1920
+      sizes: '(max-width: 1920px) 100vw, 1920px'
+      srcsets:
+        - type: image/webp
+          srcset: >-
+            /img/image-9x16.webp
+            1920w,
+            /img/image-9x16.webp
+            1080w,
+            /img/image-9x16.webp
+            640w,
+            /img/image-9x16.webp
+            320w
+        - type: image/avif
+          srcset: >-
+            /img/image-9x16.avif
+            1920w,
+            /img/image-9x16.avif
+            1080w,
+            /img/image-9x16.avif
+            640w,
+            /img/image-9x16.avif
+            320w
+        - type: image/jpeg
+          srcset: >-
+            /img/image-9x16.jpeg
+            1920w,
+            /img/image-9x16.jpeg
+            1080w,
+            /img/image-9x16.jpeg
+            640w,
+            /img/image-9x16.jpeg
+            320w
+      src: /img/image-9x16.jpeg
+mobile_ratio: "9:16"
+mobile_focus_area: center
+desktop_media:
+  mime_type: image/jpeg
+  url: /img/image-16x9.jpeg
+  title: Mobile media title
+  description: Mobile media description
+  width: 1920
+  height: 1080
+  derivatives:
+    original:
+      width: 1920
+      height: 1080
+      sizes: '(max-width: 1920px) 100vw, 1920px'
+      srcsets:
+        - type: image/webp
+          srcset: >-
+            /img/image-16x9.webp
+            1920w,
+            /img/image-16x9.webp
+            1080w,
+            /img/image-16x9.webp
+            640w,
+            /img/image-16x9.webp
+            320w
+        - type: image/avif
+          srcset: >-
+            /img/image-16x9.avif
+            1920w,
+            /img/image-16x9.avif
+            1080w,
+            /img/image-16x9.avif
+            640w,
+            /img/image-16x9.avif
+            320w
+        - type: image/jpeg
+          srcset: >-
+            /img/image-16x9.jpeg
+            1920w,
+            /img/image-16x9.jpeg
+            1080w,
+            /img/image-16x9.jpeg
+            640w,
+            /img/image-16x9.jpeg
+            320w
+      src: /img/image-16x9.jpeg
+desktop_ratio: "16:9"
+desktop_focus_area: center
diff --git a/templates/theme-default/data/c-responsive-media/different-video-ratios.yaml b/templates/theme-default/data/c-responsive-media/different-video-ratios.yaml
new file mode 100644
index 0000000..2743055
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/different-video-ratios.yaml
@@ -0,0 +1,106 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: video/mp4
+  url: /videos/video-9x16.mp4
+  title: Video 16x9
+  description: Video 16x9
+  src: /videos/video-9x16.mp4
+  poster:
+    mime_type: image/jpeg
+    url: /img/video-9x16-poster.jpeg
+    title: Desktop media title
+    description: Desktop media description
+    width: 1080
+    height: 1920
+    derivatives:
+      original:
+        width: 1080
+        height: 1920
+        sizes: '(max-width: 1920px) 100vw, 1920px'
+        srcsets:
+          - type: image/webp
+            srcset: >-
+              /img/video-16x9-poster.webp
+              1920w,
+              /img/video-16x9-poster.webp
+              1080w,
+              /img/video-16x9-poster.webp
+              640w,
+              /img/video-16x9-poster.webp
+              320w
+          - type: image/avif
+            srcset: >-
+              /img/video-16x9-poster.avif
+              1920w,
+              /img/video-16x9-poster.avif
+              1080w,
+              /img/video-16x9-poster.avif
+              640w,
+              /img/video-16x9-poster.avif
+              320w
+          - type: image/jpeg
+            srcset: >-
+              /img/video-9x16-poster.jpeg
+              1920w,
+              /img/video-9x16-poster.jpeg
+              1080w,
+              /img/video-9x16-poster.jpeg
+              640w,
+              /img/video-9x16-poster.jpeg
+              320w
+        src: /img/video-9x16-poster.jpeg
+desktop_ratio: 9x16
+desktop_focus_area: center
+desktop_media:
+  mime_type: video/mp4
+  url: /videos/video-16x9.mp4
+  title: Video 16x9
+  description: Video 16x9
+  src: /videos/video-16x9.mp4
+  poster:
+    mime_type: image/jpeg
+    url: /img/video-16x9-poster.jpeg
+    title: Desktop media title
+    description: Desktop media description
+    width: 1920
+    height: 1080
+    derivatives:
+      original:
+        width: 1920
+        height: 1080
+        sizes: '(max-width: 1920px) 100vw, 1920px'
+        srcsets:
+          - type: image/webp
+            srcset: >-
+              /img/video-16x9-poster.webp
+              1920w,
+              /img/video-16x9-poster.webp
+              1080w,
+              /img/video-16x9-poster.webp
+              640w,
+              /img/video-16x9-poster.webp
+              320w
+          - type: image/avif
+            srcset: >-
+              /img/video-16x9-poster.avif
+              1920w,
+              /img/video-16x9-poster.avif
+              1080w,
+              /img/video-16x9-poster.avif
+              640w,
+              /img/video-16x9-poster.avif
+              320w
+          - type: image/jpeg
+            srcset: >-
+              /img/video-16x9-poster.jpeg
+              1920w,
+              /img/video-16x9-poster.jpeg
+              1080w,
+              /img/video-16x9-poster.jpeg
+              640w,
+              /img/video-16x9-poster.jpeg
+              320w
+        src: /img/video-16x9-poster.jpeg
+desktop_ratio: landscape
+desktop_focus_area: center
diff --git a/templates/theme-default/data/c-responsive-media/mobile-image-and-desktop-video.yaml b/templates/theme-default/data/c-responsive-media/mobile-image-and-desktop-video.yaml
new file mode 100644
index 0000000..cf0e8b5
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/mobile-image-and-desktop-video.yaml
@@ -0,0 +1,100 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: image/jpeg
+  url: /img/image-1x1.jpeg
+  title: Mobile media title
+  description: Mobile media description
+  width: 1920
+  height: 1920
+  derivatives:
+    original:
+      width: 1920
+      height: 1920
+      sizes: '(max-width: 1920px) 100vw, 1920px'
+      srcsets:
+        - type: image/webp
+          srcset: >-
+            /img/image-1x1.webp
+            1920w,
+            /img/image-1x1.webp
+            1080w,
+            /img/image-1x1.webp
+            640w,
+            /img/image-1x1.webp
+            320w
+        - type: image/avif
+          srcset: >-
+            /img/image-1x1.avif
+            1920w,
+            /img/image-1x1.avif
+            1080w,
+            /img/image-1x1.avif
+            640w,
+            /img/image-1x1.avif
+            320w
+        - type: image/jpeg
+          srcset: >-
+            /img/image-1x1.jpeg
+            1920w,
+            /img/image-1x1.jpeg
+            1080w,
+            /img/image-1x1.jpeg
+            640w,
+            /img/image-1x1.jpeg
+            320w
+      src: /img/image-1x1.jpeg
+mobile_ratio: square
+mobile_focus_area: center
+desktop_media:
+  mime_type: video/mp4
+  url: /videos/video-16x9.mp4
+  title: Video 16x9
+  description: Video 16x9
+  src: /videos/video-16x9.mp4
+  poster:
+    mime_type: image/jpeg
+    url: /img/video-16x9-poster.jpeg
+    title: Desktop media title
+    description: Desktop media description
+    width: 1920
+    height: 1080
+    derivatives:
+      original:
+        width: 1920
+        height: 1080
+        sizes: '(max-width: 1920px) 100vw, 1920px'
+        srcsets:
+          - type: image/webp
+            srcset: >-
+              /img/video-16x9-poster.webp
+              1920w,
+              /img/video-16x9-poster.webp
+              1080w,
+              /img/video-16x9-poster.webp
+              640w,
+              /img/video-16x9-poster.webp
+              320w
+          - type: image/avif
+            srcset: >-
+              /img/video-16x9-poster.avif
+              1920w,
+              /img/video-16x9-poster.avif
+              1080w,
+              /img/video-16x9-poster.avif
+              640w,
+              /img/video-16x9-poster.avif
+              320w
+          - type: image/jpeg
+            srcset: >-
+              /img/video-16x9-poster.jpeg
+              1920w,
+              /img/video-16x9-poster.jpeg
+              1080w,
+              /img/video-16x9-poster.jpeg
+              640w,
+              /img/video-16x9-poster.jpeg
+              320w
+        src: /img/video-16x9-poster.jpeg
+desktop_ratio: landscape
+desktop_focus_area: center
diff --git a/templates/theme-default/data/c-responsive-media/mobile-image-only.yaml b/templates/theme-default/data/c-responsive-media/mobile-image-only.yaml
new file mode 100644
index 0000000..247bd34
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/mobile-image-only.yaml
@@ -0,0 +1,48 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: image/jpeg
+  url: /image-1x1
+  title: Mobile media title
+  description: Mobile media description
+  width: 1920
+  height: 1920
+  derivatives:
+    original:
+      width: 1920
+      height: 1920
+      sizes: '(max-width: 1920px) 100vw, 1920px'
+      srcsets:
+        - type: image/webp
+          srcset: >-
+            /img/image-1x1.webp
+            1920w,
+            /img/image-1x1.webp
+            1080w,
+            /img/image-1x1.webp
+            640w,
+            /img/image-1x1.webp
+            320w
+        - type: image/avif
+          srcset: >-
+            /img/image-1x1.avif
+            1920w,
+            /img/image-1x1.avif
+            1080w,
+            /img/image-1x1.avif
+            640w,
+            /img/image-1x1.avif
+            320w
+        - type: image/jpeg
+          srcset: >-
+            /img/image-1x1.jpeg
+            1920w,
+            /img/image-1x1.jpeg
+            1080w,
+            /img/image-1x1.jpeg
+            640w,
+            /img/image-1x1.jpeg
+            320w
+      src: /img/image-1x1.jpeg
+mobile_ratio: square
+mobile_focus_area: center
diff --git a/templates/theme-default/data/c-responsive-media/mobile-video-only.yaml b/templates/theme-default/data/c-responsive-media/mobile-video-only.yaml
new file mode 100644
index 0000000..cc7585b
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/mobile-video-only.yaml
@@ -0,0 +1,54 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: video/mp4
+  url: /videos/video-1x1.mp4
+  title: Video 16x9
+  description: Video 16x9
+  src: /videos/video-1x1.mp4
+  poster:
+    mime_type: image/jpeg
+    url: /img/video-1x1-poster.jpeg
+    title: Desktop media title
+    description: Desktop media description
+    width: 1920
+    height: 1920
+    derivatives:
+      original:
+        width: 1920
+        height: 1920
+        sizes: '(max-width: 1920px) 100vw, 1920px'
+        srcsets:
+          - type: image/webp
+            srcset: >-
+              /img/video-16x9-poster.webp
+              1920w,
+              /img/video-16x9-poster.webp
+              1080w,
+              /img/video-16x9-poster.webp
+              640w,
+              /img/video-16x9-poster.webp
+              320w
+          - type: image/avif
+            srcset: >-
+              /img/video-16x9-poster.avif
+              1920w,
+              /img/video-16x9-poster.avif
+              1080w,
+              /img/video-16x9-poster.avif
+              640w,
+              /img/video-16x9-poster.avif
+              320w
+          - type: image/jpeg
+            srcset: >-
+              /img/video-1x1-poster.jpeg
+              1920w,
+              /img/video-1x1-poster.jpeg
+              1080w,
+              /img/video-1x1-poster.jpeg
+              640w,
+              /img/video-1x1-poster.jpeg
+              320w
+        src: /img/video-1x1-poster.jpeg
+mobile_ratio: square
+mobile_focus_area: center
diff --git a/templates/theme-default/data/c-responsive-media/video-not-available.yaml b/templates/theme-default/data/c-responsive-media/video-not-available.yaml
new file mode 100644
index 0000000..bd63e10
--- /dev/null
+++ b/templates/theme-default/data/c-responsive-media/video-not-available.yaml
@@ -0,0 +1,54 @@
+alt: Alt text
+caption: Caption
+mobile_media:
+  mime_type: video/mp4
+  url: /videos/video-1x1-not-available.mp4
+  title: Video 16x9
+  description: Video 16x9
+  src: /videos/video-1x1-not-available.mp4
+  poster:
+    mime_type: image/jpeg
+    url: /img/video-1x1-poster.jpeg
+    title: Desktop media title
+    description: Desktop media description
+    width: 1920
+    height: 1920
+    derivatives:
+      original:
+        width: 1920
+        height: 1920
+        sizes: '(max-width: 1920px) 100vw, 1920px'
+        srcsets:
+          - type: image/webp
+            srcset: >-
+              /img/video-16x9-poster.webp
+              1920w,
+              /img/video-16x9-poster.webp
+              1080w,
+              /img/video-16x9-poster.webp
+              640w,
+              /img/video-16x9-poster.webp
+              320w
+          - type: image/avif
+            srcset: >-
+              /img/video-16x9-poster.avif
+              1920w,
+              /img/video-16x9-poster.avif
+              1080w,
+              /img/video-16x9-poster.avif
+              640w,
+              /img/video-16x9-poster.avif
+              320w
+          - type: image/jpeg
+            srcset: >-
+              /img/video-1x1-poster.jpeg
+              1920w,
+              /img/video-1x1-poster.jpeg
+              1080w,
+              /img/video-1x1-poster.jpeg
+              640w,
+              /img/video-1x1-poster.jpeg
+              320w
+        src: /img/video-1x1-poster.jpeg
+mobile_ratio: landscape
+mobile_focus_area: center
diff --git a/templates/theme-default/data/c-video/default.yaml b/templates/theme-default/data/c-video/default.yaml
deleted file mode 100644
index 97762f5..0000000
--- a/templates/theme-default/data/c-video/default.yaml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: Laboriosam et architecto eos in necessitatibus aliquam.
-asset:
-  mime_type: video/mp4
-  url: https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4
-poster:
-  mime_type: image/jpeg
-  url: http://placeimg.com/720/306/nightlife
-  title: voluptas minus neque
-  description: >-
-    Animi dolore dolor tempora consequatur doloremque molestiae nihil.
-
-    Dolore ullam nihil quasi deleniti quaerat voluptas sed molestiae
-    praesentium.
-
-    Doloremque sit perferendis.
-  width: 480
-  height: 480
-  file_size: 72417
-track:
-  mime_type: text/vtt
-  url: https://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt
-  file_size: 966
-autoplay: false
-muted: true
-loop: false
-controls: true
diff --git a/templates/theme-default/data/c-video/external.yaml b/templates/theme-default/data/c-video/external.yaml
deleted file mode 100644
index 00b2f41..0000000
--- a/templates/theme-default/data/c-video/external.yaml
+++ /dev/null
@@ -1,13 +0,0 @@
-name: Laboriosam et architecto eos in necessitatibus aliquam.
-src: https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4
-poster:
-  mime_type: image/jpeg
-  url: http://placeimg.com/720/306/nightlife
-track:
-  mime_type: text/vtt
-  url: https://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt
-  file_size: 966
-autoplay: false
-muted: true
-loop: false
-controls: true
diff --git a/templates/theme-default/data/c-video/vimeo.yaml b/templates/theme-default/data/c-video/vimeo.yaml
deleted file mode 100644
index 9845d3b..0000000
--- a/templates/theme-default/data/c-video/vimeo.yaml
+++ /dev/null
@@ -1,7 +0,0 @@
-name: Laboriosam et architecto eos in necessitatibus aliquam.
-src: https://vimeo.com/49219317
-
-autoplay: false
-muted: false
-loop: false
-controls: true
diff --git a/templates/theme-default/data/c-video/youtube.yaml b/templates/theme-default/data/c-video/youtube.yaml
deleted file mode 100644
index 88efa6b..0000000
--- a/templates/theme-default/data/c-video/youtube.yaml
+++ /dev/null
@@ -1,12 +0,0 @@
-name: Laboriosam et architecto eos in necessitatibus aliquam.
-src: https://youtu.be/qtIqKaDlqXo
-poster:
-  mime_type: image/jpeg
-  url: http://placeimg.com/480/480/nightlife
-
-autoplay: false
-muted: false
-loop: false
-controls: true
-
-
diff --git a/templates/theme-default/data/m-media/media.yaml b/templates/theme-default/data/m-media/media.yaml
index 41f1b9c..11656c1 100644
--- a/templates/theme-default/data/m-media/media.yaml
+++ b/templates/theme-default/data/m-media/media.yaml
@@ -2,4 +2,4 @@ name: media module
 layout: default
 body:
   id: default
-  content_type: c-media
+  content_type: c-responsive-media
diff --git a/templates/theme-default/layouts/partials/components/c-image.html b/templates/theme-default/layouts/partials/components/c-image.html
deleted file mode 100644
index 5fd8083..0000000
--- a/templates/theme-default/layouts/partials/components/c-image.html
+++ /dev/null
@@ -1,73 +0,0 @@
-{{- $globals := .globals -}}
-{{- $context := .context | default dict -}}
-{{- $options := .options | default dict -}}
-{{- $params := (merge $context $options) -}}
-{{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
-{{- $class_name := $params.class_name -}}
-{{- $image_mobile := $params.image_mobile -}}
-{{- $image_desktop := $params.image_desktop -}}
-{{- $caption := $params.caption -}}
-
-{{- $has_mobile := false -}}
-{{- $has_desktop := false -}}
-{{- with $image_mobile -}}
-  {{- with .url -}}
-    {{- $has_mobile = true -}}
-  {{- end -}}
-{{- end -}}
-{{- with $image_desktop -}}
-  {{- with .url -}}
-    {{- $has_desktop = true -}}
-  {{- end -}}
-{{- end -}}
-
-{{- $different_images := and $has_mobile $has_desktop -}}
-
-
-<figure class="c-image{{ range $modifier }} c-image--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
-  {{ if $different_images }}
-    <picture class="c-image__asset">
-      {{- partial "utils/asset/image/sources" (dict
-        "globals" $globals
-        "context" $image_mobile
-        "options" (merge $params (dict
-          "media" "(max-width: 767px)"
-        ))
-      ) -}}
-      {{- partial "utils/asset/image/sources" (dict
-        "globals" $globals
-        "context" $image_desktop
-        "options" (merge $params (dict
-          "media" "(min-width: 768px)"
-        ))
-      ) -}}
-      {{- partial "utils/asset/image/img" (dict
-        "globals" $globals
-        "context" $image_desktop
-        "options" $params
-      ) -}}
-    </picture>
-  {{ else }}
-    {{- with $image_mobile -}}
-      {{- partial "utils/asset" (dict
-        "globals" $globals
-        "context" .
-        "options" (merge $params (dict
-          "class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
-        ))
-      ) -}}
-    {{- end -}}
-    {{- with $image_desktop -}}
-      {{- partial "utils/asset" (dict
-        "globals" $globals
-        "context" .
-        "options" (merge $params (dict
-          "class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
-        ))
-      ) -}}
-    {{- end -}}
-  {{- end -}}
-  {{- with $caption -}}
-    <figcaption>{{ . }}</figcaption>
-  {{- end -}}
-</figure>
diff --git a/templates/theme-default/layouts/partials/components/c-responsive-media.html b/templates/theme-default/layouts/partials/components/c-responsive-media.html
new file mode 100644
index 0000000..448ce79
--- /dev/null
+++ b/templates/theme-default/layouts/partials/components/c-responsive-media.html
@@ -0,0 +1,105 @@
+{{- $globals := .globals -}}
+{{- $context := .context | default dict -}}
+{{- $options := .options | default dict -}}
+{{- $params := (merge $context $options) -}}
+{{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
+{{- $class_name := $params.class_name -}}
+
+{{- $loading := $params.loading | default "lazy" -}}
+
+{{- $caption := $params.caption -}}
+
+{{- $mobile_media := $params.mobile_media -}}
+{{- $mobile_ratio := $params.mobile_ratio -}}
+{{- $mobile_focus_area := $params.mobile_focus_area -}}
+
+{{- $desktop_media := $params.desktop_media -}}
+{{- $desktop_ratio := $params.desktop_ratio -}}
+{{- $desktop_focus_area := $params.desktop_focus_area -}}
+
+{{- $mobile_image := dict -}}
+{{- $mobile_video := dict -}}
+{{- $desktop_image := dict -}}
+{{- $desktop_video := dict -}}
+
+{{- with $mobile_media -}}
+  {{- if hasPrefix (.mime_type | default "") "video" -}}
+    {{- $mobile_video = . -}}
+    {{- if reflect.IsMap .poster -}}
+      {{- $mobile_image = .poster -}}
+    {{- end -}}
+  {{- else -}}
+    {{- $mobile_image = . -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $desktop_media -}}
+  {{- if hasPrefix (.mime_type | default "") "video" -}}
+    {{- $desktop_video = . -}}
+    {{- if reflect.IsMap .poster -}}
+      {{- $desktop_image = .poster -}}
+    {{- end -}}
+  {{- else -}}
+    {{- $desktop_image = . -}}
+  {{- end -}}
+{{- end -}}
+
+{{ $different_medias := false }}
+{{ if (and $mobile_image $desktop_image)}}
+  {{ $different_medias = true }}
+{{ end }}
+
+<figure class="c-responsive-media{{ range $modifier }} c-responsive-media--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
+  <div class="c-responsive-media__container">
+    <picture class="c-responsive-media__image">
+      {{- partial "utils/asset/image/sources" (dict
+        "globals" $globals
+        "context" $mobile_image
+        "options" (merge $params (dict
+          "ratio" $mobile_ratio
+          "media" (cond $different_medias "(max-width: 767px)" "")
+        ))
+      ) -}}
+      {{- partial "utils/asset/image/sources" (dict
+        "globals" $globals
+        "context" $desktop_image
+        "options" (merge $params (dict
+          "ratio" $desktop_ratio
+          "media" (cond $different_medias "(min-width: 768px)" "")
+        ))
+      ) -}}
+      {{- partial "utils/asset/image/img" (dict
+        "globals" $globals
+        "context" $mobile_image
+        "options" (merge $params (dict
+          "lazy" $loading
+        ))
+      ) -}}
+    </picture>
+    {{- with $mobile_video -}}
+      <div class="c-responsive-media__video{{ if $desktop_video }} md:u-hidden{{ end }}">
+        {{- partial "utils/asset" (dict
+          "globals" $globals
+          "context" .
+          "options" (merge $params (dict
+            "ratio" $desktop_ratio
+          ))
+        ) -}}
+      </div>
+    {{- end -}}
+    {{- with $desktop_video -}}
+      <div class="c-responsive-media__video{{ if $mobile_video }} -md:u-hidden{{ end }}">
+        {{- partial "utils/asset" (dict
+          "globals" $globals
+          "context" .
+          "options" (merge $params (dict
+            "ratio" $desktop_ratio
+          ))
+        ) -}}
+      </div>
+    {{- end -}}
+  </div>
+  {{- with $caption -}}
+    <figcaption>{{ . }}</figcaption>
+  {{- end -}}
+</figure>
diff --git a/templates/theme-default/layouts/partials/components/c-video.html b/templates/theme-default/layouts/partials/components/c-video.html
deleted file mode 100644
index 7455b89..0000000
--- a/templates/theme-default/layouts/partials/components/c-video.html
+++ /dev/null
@@ -1,118 +0,0 @@
-{{- $globals := .globals -}}
-{{- $context := .context | default dict -}}
-{{- $options := .options | default dict -}}
-{{- $params := (merge $context $options) -}}
-{{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
-{{- $class_name := $params.class_name -}}
-
-{{- $asset := $params.asset -}}
-{{- $src := $params.src -}}
-{{- $loop := $params.loop -}}
-{{- $poster_asset := $params.poster -}}
-{{- $controls := $params.controls -}}
-{{- $muted := $params.muted -}}
-{{- $autoplay := $params.autoplay -}}
-{{- $ratio := $params.ratio | default "16:9" -}}
-{{- $nocookie := $params.nocookie | default true -}}
-{{- $playicon := $params.playicon | default (dict "id" "play") -}}
-
-{{- $poster_src := false -}}
-{{- with $poster_asset -}}
-  {{- with .src }}
-      {{- $poster_src = . -}}
-  {{- end -}}
-{{- end -}}
-
-<div class="c-video{{ range $modifier }} c-video--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}{{ with $ratio }} o-ratio o-ratio--{{ . }}{{ end }} js-video">
-    <!-- Put your partial code here -->
-    {{- with $asset -}}
-      {{- partial "utils/asset" (dict
-        "context" .
-        "globals" $globals
-        "options" (dict
-          "loop" $loop
-          "controls" $controls
-          "muted" $muted
-          "autoplay" $autoplay
-          "poster" $poster_src
-          "class_name" (print "c-video__asset" (cond (partial "utils/reflect/is-string" $ratio) " o-ratio__content" ""))
-        )
-      ) -}}
-      {{- with $poster_asset -}}
-        <div class="c-video__poster{{ with $ratio }} o-ratio__content{{ end}}">
-          {{- partial "utils/asset" (dict
-            "context" .
-            "globals" $globals
-          ) -}}
-          {{ with $playicon }}
-            {{- partial "utils/svg/icon" (dict
-              "globals" $globals
-              "context" .
-              "options" (dict
-                "class_name" "c-video__play-icon"
-                "inline" true
-                "sprite" false
-                "width" 64
-                "height" 64
-              )
-            ) }}
-          {{ end }}
-        </div>
-      {{- end -}}
-    {{- else -}}
-      {{- with $src -}}
-        {{/* Render youtube iframe player */}}
-        {{- if or (in . "youtube") (in . "youtu.be") -}}
-          {{- partial "components/c-video/embed-youtube" (dict
-            "context" $params
-            "globals" $globals
-          ) -}}
-
-
-        {{/* Render vimeo iframe player */}}
-        {{- else if in . "vimeo" -}}
-          {{- partial "components/c-video/embed-vimeo" (dict
-            "context" $params
-            "globals" $globals
-          ) -}}
-
-        {{/* Render video tag */}}
-        {{- else -}}
-          {{- with partial "utils/html/tag" (dict "name" "video" "attr" (dict
-            "src" .
-            "class" (print "c-video__asset" (cond (partial "utils/reflect/is-string" $ratio) " o-ratio__content" ""))
-            "loop" $loop
-            "controls" $controls
-            "muted" $muted
-            "autoplay" $autoplay
-            "poster" $poster_src
-          )) -}}
-            {{- . | safeHTML -}}
-          {{- end -}}
-
-          {{- with $poster_asset -}}
-            <div class="c-video__poster{{ with $ratio }} o-ratio__content{{ end}}">
-              {{- partial "utils/asset" (dict
-                "context" .
-                "globals" $globals
-              ) -}}
-              {{ with $playicon }}
-                {{- partial "utils/svg/icon" (dict
-                  "globals" $globals
-                  "context" .
-                  "options" (dict
-                    "class_name" "c-video__play-icon"
-                    "inline" true
-                    "sprite" false
-                    "width" 64
-                    "height" 64
-                  )
-                ) }}
-              {{ end }}
-            </div>
-          {{- end -}}
-        {{- end -}}
-      {{- end -}}
-    {{- end -}}
-</div>
-