diff --git a/static/package.css b/static/package.css
index 98d09897..54d2a2dd 100644
--- a/static/package.css
+++ b/static/package.css
@@ -4,12 +4,23 @@
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   list-style: none;
   padding-left: 0;
-}
 
-.thumbnails img {
-  aspect-ratio: 1 / 1;
-  border-radius: 8px;
-  display: block;
-  object-fit: cover;
-  width: 100%;
+  a {
+    border-radius: 8px;
+    border: 1px solid #222;
+    display: block;
+    overflow: hidden;
+    transition: border-color 150ms;
+
+    &:hover, &:focus-visible {
+      border-color: #444;
+    }
+  }
+
+  img {
+    aspect-ratio: 1 / 1;
+    display: block;
+    object-fit: contain;
+    width: 100%;
+  }
 }
diff --git a/templates/package.html b/templates/package.html
index 50fae818..5f407855 100644
--- a/templates/package.html
+++ b/templates/package.html
@@ -74,7 +74,7 @@ <h1>{{ self.fingerprint }}</h1>
 %%         for (i, image) in images.iter().enumerate() {
   <li>
     <a href=/package/{{ self.fingerprint }}/{{ Ordinal(i) }}>
-      <img loading=lazy src=/media/image/{{ self.fingerprint }}/image/{{ Ordinal(i) }} >
+      <img loading=lazy src=/media/image/{{ self.fingerprint }}/image/{{ Ordinal(i) }}>
     </a>
   </li>
 %%         }