layout updates, posts section styling behaviour in grid and non-grid layout

vue-theme/src/pages/list.vue

 <template lang="pug">
 .page--list.f-row.between
     article.f-grow
-        header.f-row.center
+        header.f-row.center.t-up
             h1 {{ type }} list
             span(v-if="sortBy")
                 h1 &nbsp;sorted by {{ sortBy.replace('-', ' ') }}
             section(v-for="post in posts" :key="post.slug").shadow.post
                 router-link(:to="`/${type}/${post.slug}`")
                     p {{post.featured}}
-                    img(v-if="post.featured" :src="post.featured" alt="post thumbnail")
-                    img(v-else-if="post.hero && JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="post thumbnail from YouTube")
-                    p(v-else-if="post.hero") ERROR: {{ post.hero }}
-                    p(v-else) ERROR: no thumbnail
-
-                    h4 {{ post.title }} 
-                    p(style="font-size: 9px;") {{ post.date }}
+                    ul.f-row
+                        img(v-if="post.featured" :src="post.featured" alt="post thumbnail")
+                        img(v-else-if="post.hero && JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="post thumbnail from YouTube")
+                        p(v-else-if="post.hero") ERROR: {{ post.hero }}
+                        p(v-else) ERROR: no thumbnail
+                        li.f-col.between
+                            h2.t-up {{ post.title }}
+                            h4 {{ post.date }}
+                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit in ex pharetra volutpat ac at magna. Duis libero est, imperdiet non sollicitudin vel, eleifend at ante...
 
+        //- posts not grid
+        
         footer
             p {{ `${type} count: ${Object.values(posts).length}` }}
             p {{ `show sidebar: ${sidebar}` }}
 <style lang="postcss">
 .page--list
     article
+        /* posts not grid list */
+        ul
+            img
+                max-width: 50%
+            li
+                
         .is-grid
             display: flex
             flex-direction: row
             flex-wrap: wrap
             section
                 width: 33%
+            ul
+                flex-wrap: wrap
+                list-style: none
+                img
+                    max-width: 100%
+                
 </style>