Actor tiles maintain aspect ratio.

assets/components/actors/actors.vue

@@ -136,7 +136,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 10rem);
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     grid-gap: 0 .5rem;
     padding: 1rem;
     flex-grow: 1;
@@ -209,7 +209,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
 
     .genders {

assets/components/releases/release.vue

@@ -400,13 +400,14 @@ export default {
 }
 
 .actors {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
     flex-grow: 1;
     flex-wrap: wrap;
 }
 
 .actor {
-    width: 10rem;
     margin: 0 1rem .5rem 0;
 }
 
@@ -477,5 +478,9 @@ export default {
         width: 15rem;
         max-width: 100%;
     }
+
+    .actors {
+        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    }
 }
 </style>

assets/components/tile/actor.vue

@@ -22,8 +22,10 @@
             <span
                 v-else
                 v-tooltip.top="actor.name"
-                class="handle name"
-            >{{ actor.name }}</span>
+                class="handle"
+            >
+                <span class="name">{{ actor.name }}</span>
+            </span>
 
             <div class="avatar-container">
                 <img
@@ -103,12 +105,28 @@ export default {
 .actor {
     width: 100%;
     display: inline-block;
+    position: relative;
     margin: 0 .5rem .5rem 0;
     box-shadow: 0 0 3px var(--darken-weak);
     background: var(--profile);
+
+    &::before {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 0;
+        padding-bottom: 150%;
+    }
 }
 
 .link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
     color: var(--text-light);
     text-decoration: none;
 
@@ -144,15 +162,18 @@ export default {
 }
 
 .avatar-container {
+    display: flex;
+    flex-grow: 1;
     position: relative;
 }
 
 .avatar {
     color: var(--darken-weak);
     background: var(--darken-hint);
-    height: 13rem;
     width: 100%;
+    height: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     object-fit: cover;