small_img() helper added

app/views/packages/_grid_thumbnail.slim

@@ -1,15 +1,27 @@
 // TODO: Handle packages with multiple screenshots
 a.black href=package_path(name: pkg.name)
-  div.grid-thumbnail
-    - if pkg.screenshots_approved.any?
-      // TODO: smarter selection of the most useful screenshot instead of taking the first one
-      - screenshot = pkg.screenshots.first
-      /= image_tag(screenshot.image.variant(resize_to_limit: [160,120]), alt: screenshot.caption, class: 'thumbnail')
-      = image_tag(screenshot.simage_url(:small), alt: screenshot.caption, class: 'thumbnail')
-    - else
-      img.screenshot.thumbnail src="/images/dummy/no-screenshots-upload-one.svg"
-  div
-    .pkgname
-      = pkg.name
-    .pkgdescription
-      = pkg.description
+  / div.grid-thumbnail
+  /   - if pkg.screenshots_approved.any?
+  /     // TODO: smarter selection of the most useful screenshot instead of taking the first one
+  /     - screenshot = pkg.screenshots.first
+  /     = small_img(screenshot)
+  /   - else
+  /     img.screenshot.thumbnail src="/images/dummy/no-screenshots-upload-one.svg"
+  / div
+  /   .pkgname
+  /     = pkg.name
+  /   .pkgdescription
+  /     = pkg.description
+
+  .image
+    = small_img(pkg.screenshots.first, cls: '')
+  .text.pkgname
+    = pkg.name
+  .text
+    = pkg.description
+
+  / .card.callout
+  /   .card-divider = pkg.name
+  /   = small_img(pkg.screenshots.first, cls: 'float-center')
+  /   .card-section
+  /     = pkg.description