Fixed single article block

src/components/Feed/Card.module.scss

@@ -601,3 +601,61 @@
     }
   }
 }
+
+.shoutCardSingle {
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+
+    .shoutCardTitlesContainer {
+      flex: 1;
+    }
+
+    .shoutCardCover {
+      margin-bottom: 0;
+    }
+
+    .shoutCardCoverContainer {
+      flex: 1 58.3333%;
+    }
+
+    .shoutCardContent {
+      display: flex;
+      flex-direction: column;
+      flex: 1 41.6666%;
+      justify-content: space-between;
+      margin-bottom: 0;
+      padding-left: 4rem;
+    }
+
+    .shoutTopic {
+      margin-bottom: 3.2rem;
+    }
+
+    .shoutCardTitle {
+      margin-bottom: 2.4rem;
+    }
+
+    .shoutAuthor {
+      align-items: end;
+      display: flex;
+      flex: 1;
+    }
+  }
+
+  .shoutCardType {
+    top: 0;
+  }
+
+  .shoutCardTitle {
+    @include font-size(4rem);
+
+    font-weight: 900;
+    line-height: 1.1;
+  }
+
+  .shoutCardSubtitle {
+    color: #696969;
+    flex: 1;
+    @include font-size(2.4rem);
+  }
+}

src/components/Feed/Card.tsx

@@ -32,6 +32,7 @@ interface ArticleCardProps {
     isShort?: boolean
     withBorder?: boolean
     isCompact?: boolean
+    isSingle?: boolean
   }
   article: Shout
 }
@@ -84,7 +85,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [style.shoutCardBigTitle]: props.settings?.isBigTitle,
         [style.shoutCardVertical]: props.settings?.isVertical,
         [style.shoutCardWithBorder]: props.settings?.withBorder,
-        [style.shoutCardCompact]: props.settings?.isCompact
+        [style.shoutCardCompact]: props.settings?.isCompact,
+        [style.shoutCardSingle]: props.settings?.isSingle
       }}
     >
       <Show when={!props.settings?.noimage && cover}>

src/components/Feed/Row1.scss

@@ -1,50 +0,0 @@
-.floor--one-article {
-  @include media-breakpoint-up(md) {
-    .shout-card {
-      flex-direction: row;
-    }
-
-    .shout-card__cover {
-      margin-bottom: 0;
-    }
-
-    .shout-card__cover-container {
-      flex: 1 58.3333%;
-    }
-
-    .shout-card__content {
-      display: flex;
-      flex-direction: column;
-      flex: 1 41.6666%;
-      justify-content: space-between;
-      padding-left: 4rem;
-    }
-
-    .shout__topic {
-      margin-bottom: 3.2rem;
-    }
-
-    .shout-card__title {
-      margin-bottom: 2.4rem;
-    }
-
-    .shout__author {
-      align-items: end;
-      display: flex;
-      flex: 1;
-    }
-  }
-
-  .shout-card__title {
-    @include font-size(4rem);
-
-    font-weight: 900;
-    line-height: 1.1;
-  }
-
-  .shout-card__subtitle {
-    color: #696969;
-    flex: 1;
-    @include font-size(2.4rem);
-  }
-}

src/components/Feed/Row1.tsx

@@ -1,14 +1,13 @@
 import { Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from './Card'
-import './Row1.scss'
 
 export default (props: { article: Shout }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
       <div class="wide-container row">
         <div class="col-12">
-          <ArticleCard article={props.article} />
+          <ArticleCard article={props.article} settings={{isSingle: true}} />
         </div>
       </div>
     </div>