= paginate @members

.flex.justify-center.m-8.mx-5.md:mx-12.lg:mx-20
  .flex.flex-col.text-center
    %h1.text-4xl Current Volunteers at Hub Feenix
    -if @private > 0
      .text-gray-500
        Not showing
        = @private
        private profiles

.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
  - @members.each do |member|
    .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
          = 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
        = stayed member
      %div.h-full
        .p-5.text-center
          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
            = markdown shorten(member.bio)