From afeb7ac33c9fbd8fac5e03d03273fd62aaf27008 Mon Sep 17 00:00:00 2001
From: Brian Miller <brian@parameter1.com>
Date: Mon, 26 Aug 2024 14:26:43 -0500
Subject: [PATCH] correct fallback & add mobile card targeting

---
 .../scss/components/blocks/_section-feed.scss | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
index 11eea191b..6f4166b45 100644
--- a/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
@@ -1,13 +1,23 @@
 .section-feed-content-node {
   $self: &;
 
-  $image-size: 112px;
-  $image-width: $image-size;
-  $image-height: $image-size;
+  @function ab($a, $b: null) {
+    @if $b != null {
+        @return $b;
+    }
+    @return $a;
+  }
+
+  $image-size: 112px ;
+  $image-mobile-width: null !default;
+  $image-mobile-height: null !default;
+  $image-width: ab($image-size, $image-mobile-width);
+  $image-height: ab($image-size, $image-mobile-height);
 
   $image-desktop-width: 250px;
   $image-desktop-height: 167px;
 
+
   display: flex;
   width: 100%;
 
@@ -222,4 +232,22 @@
       }
     }
   }
+  //@todo this should also be dependend on the image width/height differing from 112
+  @include media-breakpoint-down(sm) {
+    &--section-feed-mobile-cards {
+      .section-feed-content-node {
+        &:first-child {
+          border-top: none;
+        }
+        flex-direction: column-reverse;
+        .section-feed-content-node__image-wrapper {
+          margin-left: 0;
+          margin-bottom: map-get($spacers, block);
+        }
+        .section-feed-content-node__content-teaser {
+          display: initial;
+        }
+      }
+    }
+  }
 }