added back the subtle image overlay/border from the original design

_src/css/main.css

@@ -19,6 +19,9 @@ img { vertical-align: middle; }
 
 .bg-btn { background-image: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(0,0,0,0.1) 100%); }
 
+.img-border { display: inline-block; position: relative; }
+.img-border:after { border: 1px solid #000; width: 100%; height: 100%; display: block; content: ""; position: absolute; top: 0; left: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 3px rgba(0,0,0,0.75); }
+
 .controls-prefs { top: 65px; left: -247px; }
 
 .controller { @apply .hidden .absolute .pin-t .z-10 .transition-slow; }

_src/index.html

@@ -67,7 +67,12 @@
                 </li>
               </ul>
               <ul class="gallery intro-th list-reset mb-8 -ml-5 lg:mb-0 flex lg:flex-wrap">
-                <li v-for="img in intro" class="lg:mb-5 ml-5 lg:w-auto relative"><a href="#" :class="{ active: img.active }" :data-src="'img/'+ img.main"><img :src="'img/'+ img.th" alt="screenshot thumbnail" class="transition" :class="{'opacity-50': !img.active}" /> <i v-if="img.active" class="ring -m-3px absolute pin rounded-sm shadow-ring transition"></i></a></li>
+                <li v-for="img in intro" class="lg:mb-5 ml-5 lg:w-auto relative">
+                  <a href="#" :class="{ active: img.active }" :data-src="'img/'+ img.main">
+                    <img :src="'img/'+ img.th" alt="screenshot thumbnail" class="img-border transition" :class="{'opacity-50': !img.active}" />
+                    <i v-if="img.active" class="ring -m-3px absolute pin rounded-sm shadow-ring transition"></i>
+                  </a>
+                </li>
               </ul>
             </div>
             <div class="flex-1 relative">
@@ -107,17 +112,17 @@
               <div class="lg:flex justify-between text-center">
                 <div class="mx-auto lg:mx-0 max-w-xxs">
                   <p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">1</p>
-                  <p><img src="img/org-step1.jpg" alt="step 1" /></p>
+                  <p><img src="img/org-step1.jpg" alt="step 1" class="img-border" /></p>
                   <p class="mb-12 lg:mb-0 px-2">Drag n’ Drop a backup game (ROM) from your Mac desktop.</p>
                 </div>
                 <div class="mx-auto lg:mx-0 max-w-xxs">
                   <p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">2</p>
-                  <p><img src="img/org-step2.jpg" alt="step 1" /></p>
+                  <p><img src="img/org-step2.jpg" alt="step 1" class="img-border" /></p>
                   <p class="mb-12 lg:mb-0 px-2">OpenEmu 'scans' your game and begins the organisation process.</p>
                 </div>
                 <div class="mx-auto lg:mx-0 max-w-xxs">
                   <p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">3</p>
-                  <p><img src="img/org-step3.jpg" alt="step 1" /></p>
+                  <p><img src="img/org-step3.jpg" alt="step 1" class="img-border" /></p>
                   <p class="px-2">Your game is now neatly organised and you are ready to start playing!</p>
                 </div>
               </div>

_src/js/main.js

@@ -38,6 +38,10 @@ $(function(){
     }, 500);
   });
 
+  // img-border
+  $('.img-border').each(function(){
+    $(this).removeClass('img-border').wrap('<b class="img-border">');
+  });
 
   // gallery
   $('.intro-th a').on('click', function(e){