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;

components/03_Organisms/placeList/_placeList.scss

@@ -1,6 +1,8 @@
 .LP-PlaceList{
     .LP-PlaceList__List{
         list-style-type: none;
+        padding: 0;
+        margin: 0;
     
         .LP-Link{
             .LP-Place{
@@ -23,6 +25,10 @@
             max-width: 900px;
             //min-width: 450px;
             margin: 18px 0;
+            @media (max-width: $-viewport-medium) {
+                width: 100%;
+                margin-bottom: $-spacing-large;
+            }
         }
     }
     

components/04_Templates/placeDetail/_placeDetail.scss

@@ -20,7 +20,7 @@
     }
 }
 
-@media (max-width: $-viewport-normal){
+@media (max-width: $-viewport-medium){
     .LP-PlaceDetail{
         .LP-PlaceDetail__Header{
             .LP-PlaceDetail__Image{