Tweaking teaser / teaser list on mobile viewport

components/02_Molecules/placeTeaser/_placeTeaser.scss

@@ -1,9 +1,8 @@
 .LP-PlaceTeaser{
-    width: 280px;
+    width: 100%;
 
     .LP-PlaceTeaser__Image{
-        height: 165px;
-        width: 280px;
+        width: 100%;
         overflow: hidden;
 
         .LP-Image{
@@ -15,6 +14,8 @@
 
     .LP-PlaceTeaser__Meta{
         display: flex;
+        flex-wrap: wrap;
+        gap: $-spacing-small;
         align-items: center;
         justify-content: space-between;
         padding: 5px;
@@ -41,11 +42,20 @@
     .LP-PlaceTeaser__Description{
         font-family: $-primary-sans-serif-font;
         color: $-grey;
-        display: none;
+        order: 3;
+        flex-basis: 100%;
     }
 }
 
 @media(min-width: $-viewport-small){
+    .LP-PlaceTeaser {
+        width: 280px;
+
+        &__Image {
+            width: 280px;
+            height: 165px;
+        }
+    }
     .LP-PlaceTeaser--extended{
         display: flex;
         flex-direction: row;