diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
index fee4137ec..b3ae3a786 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -17,7 +17,9 @@
       :class="['card-area', ...cardAreaClasses ]"
       :style="{ backgroundColor: $themeTokens.surface }"
     >
-      <!--
+      <div class="upper-card-area">
+        <div class="around-title">
+          <!--
         Utilizing `visuallyhidden`, `aria-labelledby`,
         and `aria-hidden` to ensure:
         - More reliable output for some screen readers
@@ -25,124 +27,129 @@
         - Prevents undesired screen reader announcements
           when title is customized via the `title` slot
       -->
-      <span :id="`card-title-${_uid}`" class="visuallyhidden">
-        {{ title }}
-      </span>
-      <component
-        :is="headingElement"
-        class="heading"
-        :style="{ color: $themeTokens.text }"
-      >
-        <!--
-          `event=""` prevents router-link click event
-          (technique used by Vue community because
-          the usual ways don't work for router-link).
-          This is to
-            - (1) prevent double navigation (the wrapping
-                  <li> is supposed to take care of navigation)
-            - (2) together with the `draggable` disabled, 
-                  ensures that text selection works on
-                  the title text (see the feature for allowing
-                  selecting card's content in `onClick`)
-        -->
-        <router-link
-          v-if="to"
-          event=""
-          :to="to"
-          draggable="false"
-          class="title"
-          :aria-labelledby="`card-title-${_uid}`"
-          @focus.native="onTitleFocus"
-          @blur.native="onTitleBlur"
-        >
-          <span aria-hidden="true">
-            <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute.-->
-            <slot 
-              v-if="$scopedSlots.title"
-              name="title"
-              :titleText="title"
-            ></slot>
-            <KTextTruncator
-              v-else
-              :text="title"
-              :maxLines="titleMaxLines"
-            />
+          <span :id="`card-title-${_uid}`" class="visuallyhidden">
+            {{ title }}
           </span>
-        </router-link>
-        <!--
-          Set tabindex to 0 to make title focusable so we
-          can use the same focus ring logic like when title
-          is a router-link. Relatedly set data-focus so that
-          the trackInputModality can set modality to keyboard
-          to make the focus ring display correctly
-          -->
-        <span
-          v-else
-          tabindex="0"
-          data-focus="true"
-          class="title"
-          :aria-labelledby="`card-title-${_uid}`"
-          @focus="onTitleFocus"
-          @blur="onTitleBlur"
-        >
-          <span aria-hidden="true">
-            <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute. -->
-            <slot 
-              v-if="$scopedSlots.title"
-              name="title"
-              :titleText="title"
-            ></slot>
-            <KTextTruncator
+          <component
+            :is="headingElement"
+            class="heading"
+            :style="{ color: $themeTokens.text }"
+          >
+            <!--
+              `event=""` prevents router-link click event
+              (technique used by Vue community because
+              the usual ways don't work for router-link).
+              This is to
+                - (1) prevent double navigation (the wrapping
+                      <li> is supposed to take care of navigation)
+                - (2) together with the `draggable` disabled, 
+                      ensures that text selection works on
+                      the title text (see the feature for allowing
+                      selecting card's content in `onClick`)
+            -->
+            <router-link
+              v-if="to"
+              event=""
+              :to="to"
+              draggable="false"
+              class="title"
+              :aria-labelledby="`card-title-${_uid}`"
+              @focus.native="onTitleFocus"
+              @blur.native="onTitleBlur"
+            >
+              <span aria-hidden="true">
+                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute.-->
+                <slot 
+                  v-if="$scopedSlots.title"
+                  name="title"
+                  :titleText="title"
+                ></slot>
+                <KTextTruncator
+                  v-else
+                  :text="title"
+                  :maxLines="titleMaxLines"
+                />
+              </span>
+            </router-link>
+            <!--
+              Set tabindex to 0 to make title focusable so we
+              can use the same focus ring logic like when title
+              is a router-link. Relatedly set data-focus so that
+              the trackInputModality can set modality to keyboard
+              to make the focus ring display correctly
+              -->
+            <span
               v-else
-              :text="title"
-              :maxLines="titleMaxLines"
-            />
-          </span>
-        </span>
-      </component>
-
-      <div
-        v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
-        class="thumbnail"
-      >
-        <!-- 
-          Render KImg even if thumbnailSrc is not provided since in that case
-          KImg takes care of showing the gray placeholder area.
-        -->
-        <KImg
-          data-test="thumbnail-img"
-          :src="thumbnailSrc"
-          :scaleType="thumbnailScaleType"
-          :aspectRatio="thumbnailAspectRatio"
-          :isDecorative="true"
-          :appearanceOverrides="thumbnailStyles"
-          @error="onThumbnailError"
-        />
-        <span
-          v-if="!thumbnailSrc || thumbnailError"
-          class="thumbnail-placeholder"
+              tabindex="0"
+              data-focus="true"
+              class="title"
+              :aria-labelledby="`card-title-${_uid}`"
+              @focus="onTitleFocus"
+              @blur="onTitleBlur"
+            >
+              <span aria-hidden="true">
+                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute. -->
+                <slot 
+                  v-if="$scopedSlots.title"
+                  name="title"
+                  :titleText="title"
+                ></slot>
+                <KTextTruncator
+                  v-else
+                  :text="title"
+                  :maxLines="titleMaxLines"
+                />
+              </span>
+            </span>
+          </component>
+
+          <div
+            v-if="hasAboveTitleArea"
+            data-test="aboveTitle"
+            class="above-title"
+          >
+            <!-- @slot Places content to the area above the title. -->
+            <slot name="aboveTitle"></slot>
+          </div>
+    
+          <div
+            v-if="hasBelowTitleArea"
+            data-test="belowTitle"
+            class="below-title"
+            :style="{ color: $themeTokens.annotation }"
+          >
+            <!-- @slot Places content to the area below the title. -->
+            <slot name="belowTitle"></slot>
+          </div>
+        </div>
+
+        <div
+          v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
+          class="thumbnail"
         >
-          <!-- @slot Places content to the thumbnail placeholder area. -->
-          <slot name="thumbnailPlaceholder"></slot>
-        </span>
-      </div>
-      <div
-        v-if="hasAboveTitleArea"
-        data-test="aboveTitle"
-        class="above-title"
-      >
-        <!-- @slot Places content to the area above the title. -->
-        <slot name="aboveTitle"></slot>
-      </div>
-      <div
-        v-if="hasBelowTitleArea"
-        data-test="belowTitle"
-        class="below-title"
-        :style="{ color: $themeTokens.annotation }"
-      >
-        <!-- @slot Places content to the area below the title. -->
-        <slot name="belowTitle"></slot>
+          <!-- 
+            Render KImg even if thumbnailSrc is not provided since in that case
+            KImg takes care of showing the gray placeholder area.
+          -->
+          <KImg
+            data-test="thumbnail-img"
+            :src="thumbnailSrc"
+            :scaleType="thumbnailScaleType"
+            :aspectRatio="thumbnailAspectRatio"
+            :isDecorative="true"
+            :appearanceOverrides="thumbnailStyles"
+            @error="onThumbnailError"
+          />
+          <span
+            v-if="!thumbnailSrc || thumbnailError"
+            class="thumbnail-placeholder"
+          >
+            <!-- @slot Places content to the thumbnail placeholder area. -->
+            <slot name="thumbnailPlaceholder"></slot>
+          </span>
+        </div>
       </div>
+
       <div
         v-if="hasFooterArea"
         data-test="footer"
@@ -573,10 +580,7 @@
   .card-area {
     @extend %dropshadow-2dp;
 
-    position: relative; /* basis for absolute positioning of thumbnail images */
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    position: relative; /* basis for absolute positioning of the thumbnail in 'horizontal-with-large-thumbnail' layout */
     width: 100%;
     height: 100%;
     border-radius: 0.5em;
@@ -589,8 +593,25 @@
     }
   }
 
+  .around-title {
+    display: flex;
+    flex-direction: column;
+    order: 2;
+
+    .heading {
+      order: 2;
+    }
+
+    .above-title {
+      order: 1;
+    }
+
+    .below-title {
+      order: 3;
+    }
+  }
+
   .heading {
-    order: 3;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
@@ -601,16 +622,8 @@
     order: 1;
   }
 
-  .above-title {
-    order: 2;
-  }
-
-  .below-title {
-    order: 4;
-  }
-
   .footer {
-    order: 5;
+    order: 3;
   }
 
   .thumbnail-placeholder {
@@ -685,6 +698,18 @@
     .thumbnail {
       height: 180px;
     }
+
+    .upper-card-area {
+      display: flex;
+      flex-direction: column;
+
+      .thumbnail {
+        order: 1;
+      }
+      .around-title {
+        order: 2;
+      }
+    }
   }
 
   .vertical-with-small-thumbnail {
@@ -698,105 +723,88 @@
     }
   }
 
-  .horizontal-with-large-thumbnail {
-    $thumbnail-width: 40%;
+  .horizontal-with-small-thumbnail {
+    .upper-card-area {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
 
-    .thumbnail {
-      position: absolute;
-      width: $thumbnail-width;
-      height: 100%;
-    }
+      .thumbnail {
+        width: 35%;
+      }
 
-    .heading,
-    .above-title,
-    .below-title,
-    .footer {
-      width: calc(100% - #{$thumbnail-width} - 2 * #{$spacer});
+      .around-title {
+        width: 65%;
+      }
     }
 
     &.thumbnail-align-left {
-      align-items: flex-end;
-
-      .thumbnail {
-        left: 0;
+      .upper-card-area {
+        .thumbnail {
+          order: 1;
+        }
+        .around-title {
+          order: 2;
+        }
       }
     }
 
     &.thumbnail-align-right {
-      align-items: flex-start;
-
-      .thumbnail {
-        right: 0;
+      .upper-card-area {
+        .thumbnail {
+          order: 2;
+        }
+        .around-title {
+          order: 1;
+        }
       }
     }
-  }
-
-  .horizontal-with-small-thumbnail {
-    $thumbnail-width: null;
-
-    /*
-      Coordinates space taken by the thumbnail area and the content area
-      next to it more intelligently in browsers that support `clamp()` by:
-
-      - Instead of defining 'width', 'min-width', and 'max-width' separately,
-        `clamp()` is used with the goal to have the actual thumbnail width
-        saved in the single `$thumbnail-width` value.
 
-      - The `$thumbnail-width` value is then referenced when calculating
-        the remaining space for the content area, ensuring the precise
-        distribution of space.
-
-      Resolves some issues related to unprecise calculations, most importantly
-      this removes the area of empty space between the thumbnail and content areas
-      in some card's sizes, wasting space that can be used for card's textual content.
-    */
-    @mixin clamp-with-fallback($min, $preferred, $max) {
-      // fallback for browsers that don't support 'clamp()'
-      $thumbnail-width: $preferred;
-
-      width: $thumbnail-width;
-      min-width: $min;
-      max-width: $max;
-
-      // clamp(1px, 1%, 1px) only used for testing support
-      @supports (width: clamp(1px, 1%, 1px)) {
-        $thumbnail-width: clamp(#{$min}, #{$preferred}, #{$max});
-
-        width: $thumbnail-width;
-      }
+    .footer {
+      width: calc(100% - 2 * #{$spacer});
     }
+  }
 
-    .thumbnail {
-      @include clamp-with-fallback(100px, 35%, 120px);
+  .horizontal-with-large-thumbnail {
+    /* stylelint-disable scss/at-extend-no-missing-placeholder */
+    @extend .horizontal-with-small-thumbnail;
+    /* stylelint-enable scss/at-extend-no-missing-placeholder */
 
-      position: absolute;
-      top: $spacer;
+    .upper-card-area {
+      .thumbnail {
+        position: absolute;
+        height: 100%;
+      }
     }
 
-    .heading,
-    .above-title,
-    .below-title {
-      width: calc(100% - #{$thumbnail-width} - 3 * #{$spacer});
-    }
+    &.thumbnail-align-right {
+      .upper-card-area {
+        .thumbnail {
+          right: 0;
+        }
+      }
 
-    .footer {
-      width: calc(100% - 2 * #{$spacer});
+      .footer,
+      .around-title {
+        margin-right: auto;
+      }
     }
 
     &.thumbnail-align-left {
-      align-items: flex-end;
+      .upper-card-area {
+        .thumbnail {
+          left: 0;
+        }
+      }
 
-      .thumbnail {
-        left: $spacer;
+      .footer,
+      .around-title {
+        margin-left: auto;
       }
     }
 
-    &.thumbnail-align-right {
-      align-items: flex-start;
-
-      .thumbnail {
-        right: $spacer;
-      }
+    .footer {
+      width: calc(65% - 2 * #{$spacer});
     }
   }