Improve mobile responsiveness for RecipeCard

recipes/src/components/RecipeCard/styles.scss

@@ -55,7 +55,24 @@
         }
       }
     }
+    @media #{$small-device} {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1.5fr 1fr 0.5fr;
+      max-height: 40vh;
+      &__media,
+      &__name,
+      &__information {
+        grid-column: unset;
+        grid-row: unset;
+      }
+
+      &__media {
+        border-right: 0;
+        border-bottom: 3px solid black;
+      }
+    }
   }
+  
   &__content {
     font-size: $font-size-large;
 

recipes/src/styles/_devices.scss

@@ -0,0 +1,2 @@
+$small-device: "only screen and (max-width : 500px)";
+$medium-device: "only screen and (max-width : 800px)";

recipes/src/styles/_variables.scss

@@ -2,4 +2,5 @@
 @import './_fonts.scss';
 @import './_mixins.scss';
 @import './_ui.scss';
-@import './spacing.scss';
+@import './spacing.scss';
+@import './devices.scss';