diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
index 6663e606d..0a793cc3c 100644
--- a/source/_patterns/02-molecules/card/_card.scss
+++ b/source/_patterns/02-molecules/card/_card.scss
@@ -498,32 +498,51 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   }
 }
 
-.usa-card__container.type-image {
-  @include u-padding(0);
-
-  .usa-card__media {
-    line-height: 0;
-    @include u-margin-right(2);
-
-    img {
-      object-fit: fill;
+.usa-card--media-left, .usa-card--media-top {
+  .usa-card__container.type-image {
+    @include u-padding(0);
+    .usa-card__body {
+      @include u-padding-left(0);
+      @include u-padding-right(0);
     }
   }
+}
 
-  .usa-card__content {
-    @include u-padding(3);
-  }
+.usa-card--media-top {
+  .usa-card__container.type-image {
+    .usa-card__header {
+      height: unset;
+      margin-top: 21rem;
+      .usa-card__heading {
+        @include u-color(map-get($_config, title-color));
+        position: unset;
+        white-space: normal;
+      }
+    }
+    .usa-card__media{
+      line-height: 0;
+      @include u-margin-right(1);
+      img{
+        object-fit: cover;
+        height: 20rem;
+        display: flex;
+        }
+      }
+    }
+    .usa-card__content{
+      @include u-padding(3);
+    }
 }
 
 .jcc-cards--1-cols {
-  .usa-card__container.type-image {
-    .jcc-card--overlay-color-none {
-      aspect-ratio: 16/9;
-      overflow: hidden;
-      border-radius: initial;
-      img {
-        object-fit: fill;
+  .usa-card--media-left{
+    .usa-card__container.type-image {
+      .jcc-card--overlay-color-none {
+        aspect-ratio: var(--frame-h,16)/var(--frame-v,9);
+        overflow: hidden;
+        border-radius: initial;
       }
     }
   }
 }
+
diff --git a/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml
new file mode 100644
index 000000000..542e057d4
--- /dev/null
+++ b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml
@@ -0,0 +1,25 @@
+cards:
+  heading:
+    title: "Cards"
+    lead: "<p>Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis.</p>"
+  num_cols: "2-60-40"
+  items:
+    - style: "media-top"
+      title: "Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare "
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+    - style: "media-top"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+