Final resources

public/build/manifest.json

@@ -1,16 +1,16 @@
 {
   "resources/assets/sass/app.scss": {
-    "file": "assets/app-UrAe1qQ-.css",
+    "file": "assets/app-CPM0Ossz.css",
     "src": "resources/assets/sass/app.scss",
     "isEntry": true
   },
   "resources/css/app.css": {
-    "file": "assets/app-DRpT6nvz.css",
+    "file": "assets/app-BjeCA3WD.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-Bc4NWavi.js",
+    "file": "assets/app-BAIvXn6i.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
@@ -93,7 +93,7 @@
     "isDynamicEntry": true
   },
   "resources/lang/php_en.json": {
-    "file": "assets/php_en-B_4MyBvm.js",
+    "file": "assets/php_en-C0dtDj9q.js",
     "name": "php_en",
     "src": "resources/lang/php_en.json",
     "isDynamicEntry": true

resources/js/components/ResourceCard.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="relative flex flex-col bg-white rounded-lg overflow-hidden">
-    <div class="flex-shrink-0">
-      <img :src="resource.thumbnail" />
+    <div class="relative w-full h-48 sm:h-56 md:h-60 bg-slate-100 overflow-hidden">
+      <img
+        :src="resource.thumbnail"
+        alt=""
+        loading="lazy"
+        class="absolute inset-0 w-full h-full object-cover object-center"
+      />
     </div>
 
     <div