diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js
index 8efcf3f4c..381c2e7ea 100644
--- a/webapp/components/Editor/Editor.story.js
+++ b/webapp/components/Editor/Editor.story.js
@@ -40,9 +40,9 @@ storiesOf('Editor', module)
     return {
       components: { ctx },
       template: `
-        <ds-card style="width: 50%; min-width: 500px; margin: 0 auto;">
+        <base-card style="width: 50%; min-width: 500px; margin: 0 auto;">
           <ctx />
-        </ds-card>
+        </base-card>
       `,
     }
   })
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index deb012c10..a8ba12b7f 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -9,7 +9,7 @@
       :to="{ name: 'post-id-slug', params, ...hashParam }"
       @click.native="$emit('read')"
     >
-      <base-card>
+      <base-card class="--wide-content">
         <h2 class="card-heading">{{ from.title || from.post.title }}</h2>
         <p>
           <strong v-if="isComment" class="comment">{{ $t(`notifications.comment`) }}:</strong>
@@ -67,10 +67,6 @@ export default {
     opacity: 0.5;
   }
 
-  .user-teaser {
-    margin-bottom: $space-x-small;
-  }
-
   > .description {
     margin-bottom: $space-x-small;
   }
@@ -82,18 +78,14 @@ export default {
     &:hover {
       color: $color-primary;
     }
+  }
 
-    > .base-card {
-      padding: $space-x-small;
+  .user-teaser {
+    margin-bottom: $space-x-small;
+  }
 
-      > .card-heading {
-        font-size: $font-size-large;
-      }
-
-      .comment {
-        font-weight: $font-weight-bold;
-      }
-    }
+  .comment {
+    font-weight: $font-weight-bold;
   }
 }
 </style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 0977690d0..602036dcc 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -87,7 +87,7 @@ export default {
   mounted() {
     const width = this.$el.offsetWidth
     const height = Math.min(width / this.post.imageAspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.ds-card-image')
+    const imageElement = this.$el.querySelector('.card-image > .image')
     if (imageElement) {
       imageElement.style.height = `${height}px`
     }
@@ -170,6 +170,7 @@ export default {
 
     > .image {
       width: 100%;
+      max-height: 2000px;
       object-fit: contain;
     }
   }
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
index 31f2083b3..f84c4389f 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.vue
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -38,6 +38,7 @@ export default {}
   }
 
   > .card-heading {
+    font-size: $font-size-large;
     margin-bottom: $space-x-small;
   }
 }
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 40bb31e46..2f2f14c1e 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -219,11 +219,6 @@ export default {
 </script>
 
 <style lang="scss">
-.ds-card-image img {
-  max-height: 2000px;
-  object-fit: contain;
-}
-
 .masonry-grid {
   display: grid;
   grid-gap: 10px;