list item styles

src/components/hy-general-list-item/hy-general-list-item.scss

@@ -4,22 +4,48 @@
 
 .hy-general-list-item {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-family: var(--main-font-family);
   position: relative;
   margin-bottom: 1rem;
 
+  @include breakpoint($narrow) {
+    flex-direction: row;
+  }
+
   &:hover {
     cursor: pointer;
   }
 
   &__image-container {
-    flex-basis: 33.3%;
+    display: flex;
+    flex: 1;
+    justify-content: stretch;
+    min-height: 2rem;
     position: relative;
+
+    @include breakpoint($narrow) {
+      flex-basis: 33.3%;
+    }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
   }
+
   &__text-container {
-    flex-basis: 66.6%;
-    padding: 1.375rem 2rem;
+    background: var(--grayscale-background-box);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 1rem;
+
+    @include breakpoint($narrow) {
+      flex-basis: 66.6%;
+      padding: 1.375rem 2rem;
+    }
   }
 
   &--image {
@@ -47,6 +73,7 @@
     @include font-weight($bold);
     color: var(--brand-main-nearly-black);
     letter-spacing: -0.5px;
+    padding-bottom: 10px;
   }
 
   &--description {