last story and last picture section style

app/views/members/index.html.haml

@@ -5,7 +5,7 @@
     .overflow-hidden.border.border-gray-100.shadow-sm
       .h-0.overflow-hidden.relative{class: "pt-[125%]"}
         =link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
-          = image_for( member ,  class: "object-cover")
+          = picture_for( member ,  class: "object-cover")
       %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
         = member.name
       .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center

app/views/merged/view/_section_pictures.haml

@@ -0,0 +1,3 @@
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
+  - Picture.all.limit(4).each do |picture|
+    = render "pictures/picture" , picture: picture

app/views/merged/view/_section_story.haml

@@ -0,0 +1,2 @@
+-  story = Story.last
+= render_story story

app/views/pictures/_picture.haml

@@ -1,11 +1,11 @@
 .group.relative.overflow-hidden
   .flex.justify-between
-    .ml-2= link_to picture.member.name , member_path(picture.member) , class: :underline
+    .ml-2= link_to picture.member.name , main_app.member_path(picture.member) , class: :underline
     .mr-2
       = distance_of_time_in_words_to_now picture.happened
       ago
   .h-0.overflow-hidden.relative{class: "pt-[75%]"}
-    = image_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
+    = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
     .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
       .text-center.mt-2.text-white= picture.text

app/views/stories/_half.haml

@@ -1,6 +1,6 @@
 %section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
   %div
-    = image_for( story , "h-56 w-full object-cover sm:h-full")
+    = picture_for( story , "h-56 w-full object-cover sm:h-full")
   .p-8.md:p-12.lg:px-16.lg:py-24
     .mx-auto.max-w-xl.text-center
       %h2.text-2xl.font-bold.md:text-4xl

app/views/stories/_pic.haml

@@ -1,6 +1,6 @@
 %section.flex.justify-center.p-8.flex-col.md:flex-row.m-20
   .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{class: "lg:w-2/3"}
-    = image_for(story ,"object-cover")
+    = picture_for(story ,"object-cover")
   .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
     .flex-1
       .text-center

app/views/stories/_text.haml

@@ -7,5 +7,5 @@
         = distance_of_time_in_words_to_now story.happened
         ago
   .max-w-full.mt-4.gap-16.columns-1.md:columns-2.lg:columns-3.xl:columns-4{ prose_classes  }
-    = image_for( story , "h-56 w-full object-cover sm:h-full")
+    = picture_for( story , "h-56 w-full object-cover sm:h-full")
     = markdown(story.text)