Fixed article cards style

src/components/Feed/ArticleCard.module.scss

@@ -325,7 +325,9 @@
 }
 
 .shoutCardWithCover {
-  padding: 56.2% 2.4rem 0;
+  aspect-ratio: 16/9;
+  padding: 0 2.4rem 0;
+  width: 100%;
 
   @include media-breakpoint-down(sm) {
     padding-top: 100%;
@@ -393,6 +395,11 @@
   .shoutCardTitle {
     @include font-size(3.2rem);
   }
+
+  .shoutTopic a:hover {
+    background: #fff !important;
+    color: #000 !important;
+  }
 }
 
 .shoutCardContentTop {
@@ -505,12 +512,20 @@
 .shoutCardVertical {
   aspect-ratio: auto;
   height: 100%;
+  min-height: 250px;
   margin: 0;
-  padding: 0 0 20%;
-
-  @include media-breakpoint-up(xl) {
-    aspect-ratio: 1 / 1.6;
   padding: 0;
+
+  @include media-breakpoint-up(sm) {
+    aspect-ratio: 2/1;
+  }
+
+  @include media-breakpoint-up(md) {
+    aspect-ratio: 1/1;
+  }
+
+  @include media-breakpoint-up(lg) {
+    aspect-ratio: 1/1.6;
   }
 
   .shoutCardTitle,

src/components/Feed/ArticleCard.tsx

@@ -129,6 +129,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
             }
             slug={mainTopic.slug}
             isFloorImportant={props.settings?.isFloorImportant}
+            class={styles.shoutTopic}
           />
         </Show>
 

src/components/Feed/CardTopic.tsx

@@ -7,12 +7,13 @@ type CardTopicProps = {
   title: string
   slug: string
   isFloorImportant?: boolean
+  class?: string
 }
 
 export const CardTopic = (props: CardTopicProps) => {
   return (
     <div
-      class={clsx(styles.shoutTopic, {
+      class={clsx(styles.shoutTopic, props.class, {
         [styles.shoutTopicFloorImportant]: props.isFloorImportant
       })}
     >

src/components/Feed/RowShort.tsx

@@ -5,10 +5,10 @@ import { ArticleCard } from './ArticleCard'
 export default (props: { articles: Shout[] }) => (
   <div class="floor floor--7">
     <div class="wide-container">
-      <div class="row">
+      <div class="short-cards">
         <For each={props.articles}>
           {(a) => (
-            <div class="col-md-12 col-lg-6">
+            <div class="short-card">
               <ArticleCard
                 article={a}
                 settings={{

src/styles/app.scss

@@ -708,6 +708,28 @@ figure {
   }
 }
 
+.short-cards {
+  margin: 0 -5px;
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.short-card {
+  margin-bottom: 10px;
+  padding: 0 5px;
+
+  @include media-breakpoint-up(md) {
+    flex: 1 0 50%;
+  }
+
+  @include media-breakpoint-up(lg) {
+    flex: 1 0 25%;
+  }
+}
+
 .row {
   @include media-breakpoint-down(sm) {
     margin-left: divide(-$container-padding-x, 2);