diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index ce5cc6a3..6de9c791 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3019,9 +3019,9 @@ body.zen-mode-enable {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .md\:flex-nowrap {
+  .md\:flex-row {
     @media (width >= 853px) {
-      flex-wrap: nowrap;
+      flex-direction: row;
     }
   }
   .md\:justify-start {
@@ -3770,24 +3770,6 @@ a {
 pre {
   text-align: left;
 }
-.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-.thumbnail_card {
-  height: 200px;
-}
-.thumbnail_card_related {
-  height: 150px;
-}
-.thumbnail_card_term {
-  height: 150px;
-}
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
@@ -3799,7 +3781,23 @@ pre {
   width: 100%;
   height: 100%;
 }
-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+.thumbnail--related {
+  height: 150px;
+}
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+@media (width < 853px) {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+.thumbnail-shadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 .anchor {
@@ -3813,20 +3811,11 @@ pre {
   scroll-margin-top: 145px;
 }
 @media (width >= 640px) {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
   .article {
     flex-wrap: wrap;
   }
 }
 @media (width >= 853px) {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
   .article {
     flex-wrap: nowrap;
   }
diff --git a/assets/css/main.css b/assets/css/main.css
index db602162..5bdd77d3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -163,34 +163,6 @@ pre {
   text-align: left;
 }
 
-.thumbnail,
-.thumbnail_card,
-.thumbnail_card_related,
-.thumbnail_card_term,
-.single_hero_basic,
-.single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-
-.thumbnail_card {
-  height: 200px;
-}
-
-.thumbnail_card_related {
-  height: 150px;
-}
-
-.thumbnail_card_term {
-  height: 150px;
-}
-
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
@@ -205,7 +177,27 @@ pre {
   height: 100%;
 }
 
-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+
+.thumbnail--related {
+  height: 150px;
+}
+
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+
+@variant max-md {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+
+.thumbnail-shadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
@@ -224,21 +216,12 @@ pre {
 }
 
 @variant sm {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
   .article {
     flex-wrap: wrap;
   }
 }
 
 @variant md {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
   .article {
     flex-wrap: nowrap;
   }
diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html
index 50381dcc..511565f0 100644
--- a/layouts/partials/article-link/_shortcode.html
+++ b/layouts/partials/article-link/_shortcode.html
@@ -7,29 +7,22 @@
 {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
 {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
-{{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $cardContentClasses := "" }}
 
-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
 {{ if site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-2.5 pl-4 pb-0" $cardContentClasses }}
 {{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
-{{ end }}
-
-{{ $articleInnerClasses := "" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-2.5 pl-4 pb-0") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
+  {{ $cardClasses = printf "%s" $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ end }}
 
 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}
 
 {{ $featured := "" }}
@@ -62,11 +55,18 @@
 {{ end }}
 
 
-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
   {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
     <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html
index f333c223..0bb98641 100644
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -34,7 +34,15 @@
 <article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
-    <div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--related">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
     <span class="absolute top-0 right-0 m-2">
diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html
index 6f9e9ba9..aaaab0c8 100644
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -38,7 +38,15 @@
 <article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
-    <div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
     <span class="absolute top-0 right-0 m-2">
diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html
index 54b7c3b0..50924907 100644
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -3,33 +3,25 @@
   2. Recent articles template (when the cardView option is not enabled)
   3. Shortcode list.html
 */}}
-{{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }}
+{{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
+{{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $cardContentClasses := "" }}
+
+{{ if site.Params.list.showCards }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-4" $cardContentClasses }}
 {{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
-
-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
-{{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
-{{ end }}
-
-{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-
-{{ $articleInnerClasses := "" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
+  {{ $cardClasses = $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ end }}
 
 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}
 
 {{ $featured := "" }}
@@ -62,11 +54,19 @@
 {{ end }}
 
 
-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
   {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure
+      class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
   {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
     <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
@@ -79,7 +79,7 @@
               <span class="ltr:hidden">&#8598;</span>
             </span>
           {{ end }}
-          </h2>
+        </h2>
       </a>
       {{ if and .Draft .Site.Params.article.showDraftLabel }}
         <div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
diff --git a/layouts/partials/hero/basic.html b/layouts/partials/hero/basic.html
index 34ec0f3b..36c6f8dc 100644
--- a/layouts/partials/hero/basic.html
+++ b/layouts/partials/hero/basic.html
@@ -1,6 +1,7 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 
 {{ $featured := "" }}
+{{ $featuredURL := "" }}
 {{ if .Params.featureimage }}
   {{ $url := .Params.featureimage }}
   {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }}
@@ -27,18 +28,22 @@
   {{ end }}
 {{ end }}
 
-{{- with $featured -}}
-  {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg") }}
-    {{ with . }}
-      <div
-        class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-      <div
-        class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $featuredURL = (.Resize $size).RelPermalink }}
   {{ end }}
-{{- end -}}
+{{ end }}
+
+{{ with $featuredURL }}
+  <div class="overflow-hidden h-36 md:h-56 lg:h-72">
+    <img
+      src="{{ . }}"
+      alt="{{ $.Title }}"
+      loading="eager"
+      decoding="async"
+      fetchpriority="high"
+      class="w-full h-full nozoom object-cover">
+  </div>
+{{ end }}
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index a0b4cc94..e378537d 100644
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -2,6 +2,7 @@
 
 {{ $images := .Resources.ByType "image" }}
 {{ $background := $images.GetMatch "*background*" }}
+{{ $backgroundURL := "" }}
 
 {{ if not $background }}
   {{ with .Site.Params.defaultBackgroundImage }}
@@ -17,7 +18,16 @@
   {{ if not $background }}{{ $background = $images.GetMatch . }}{{ end }}
 {{ end }}
 
+{{ with $background }}
+  {{ $backgroundURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $backgroundURL = (.Resize $size).RelPermalink }}
+  {{ end }}
+{{ end }}
+
 {{ $featured := "" }}
+{{ $featuredURL := "" }}
 {{ if .Params.featureimage }}
   {{ $url := .Params.featureimage }}
   {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }}
@@ -44,6 +54,14 @@
   {{ end }}
 {{ end }}
 
+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+    {{ $featuredURL = (.Resize $size).RelPermalink }}
+  {{ end }}
+{{ end }}
+
 {{ $isParentList := eq (.Scratch.Get "scope") "list" }}
 {{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
   (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
@@ -51,40 +69,32 @@
   )
 }}
 
-{{- with $featured -}}
-  {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
-    {{ with . }}
-      <div
-        class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-      <div
-        class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom"
-        style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{ end }}
-{{- end -}}
-
-{{- with $background -}}
-
-  <div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
-    {{ $imageURL := .RelPermalink }}
-    {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
-      {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
-    {{ end }}
+{{ with $featuredURL }}
+  <div class="overflow-hidden rounded-md h-36 md:h-56 lg:h-72 nozoom">
     <img
-      id="background-image"
-      src="{{ $imageURL }}"
+      src="{{ . }}"
+      alt="{{ $.Title }}"
+      loading="eager"
+      decoding="async"
+      fetchpriority="high"
+      class="w-full h-full nozoom object-cover">
+  </div>
+{{ end }}
+
+
+<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
+  {{ with $backgroundURL }}
+    <img
+      id="background-image-main"
+      src="{{ . }}"
       alt="Background Image"
       class="absolute inset-0 h-full w-full object-cover">
-    <div
-      class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
-    <div
-      class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
-  </div>
-{{- end -}}
+  {{ end }}
+  <div
+    class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
+  <div
+    class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
+</div>
 
 {{ if $shouldBlur | default false }}
   <div
diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html
index 4fa7ca31..eb2fe80f 100644
--- a/layouts/partials/term-link/card.html
+++ b/layouts/partials/term-link/card.html
@@ -1,23 +1,43 @@
-<a href="{{ .Page.RelPermalink }}" class="min-w-full">
-  <div
-    class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
-    {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 
-    {{- $images := .Page.Resources.ByType "image" -}}
-    {{- $featured := $images.GetMatch "*feature*" -}}
-    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-    {{- with $featured -}}
-      {{ if $disableImageOptimization }}
-        {{ with . }}
-          <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-        {{ end }}
-      {{ else }}
-        {{ with .Resize "600x" }}
-          <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-        {{ end }}
-      {{ end }}
-    {{- end -}}
+{{ $featured := "" }}
+{{ $featuredURL := "" }}
+{{ with .Page.Params.featureimage }}
+  {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+    {{ $featured = resources.GetRemote . }}
+  {{ else }}
+    {{ $featured = resources.Get . }}
+  {{ end }}
+{{ end }}
 
+{{ if not $featured }}
+  {{ $images := .Page.Resources.ByType "image" }}
+  {{ range slice "*feature*" "*cover*" "*thumbnail*" }}
+    {{ if not $featured }}{{ $featured = $images.GetMatch . }}{{ end }}
+  {{ end }}
+{{ end }}
+
+{{ with $featured }}
+  {{ $featuredURL = .RelPermalink }}
+  {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+    {{ $featuredURL = (.Resize "600x").RelPermalink }}
+  {{ end }}
+{{ end }}
+
+
+<div class="min-w-full">
+  <div class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+    {{ with $featuredURL }}
+      <figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
+        <img
+          src="{{ . }}"
+          alt="{{ $.Page.Title }}"
+          loading="lazy"
+          decoding="async"
+          fetchpriority="low"
+          class="not-prose absolute inset-0 w-full h-full object-cover">
+      </figure>
+    {{ end }}
     {{ if site.Params.taxonomy.showTermCount | default true }}
       <span class="absolute bottom-0 right-0 m-2">
         <span class="flex">
@@ -28,14 +48,16 @@
         </span>
       </span>
     {{ end }}
-
-
     <div class="px-6 py-4">
-      <div
-        class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
-        {{ .Page.Title | emojify }}
-      </div>
+      <a
+        {{ partial "article-link/_external-link.html" .Page | safeHTMLAttr }}
+        class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        <div
+          class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+          {{ .Page.Title | emojify }}
+        </div>
+      </a>
     </div>
     <div class="px-6 pt-4 pb-2"></div>
   </div>
-</a>
+</div>