Refactored media module. Returning 320p and 720p videos from MindGeek as teasers instead of trailers.

assets/components/actors/actors.vue

@@ -116,7 +116,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, .5fr));
+    grid-template-columns: repeat(auto-fit, 10rem);
     grid-gap: 0 .5rem;
     padding: 1rem;
     flex-grow: 1;
@@ -127,10 +127,11 @@ export default {
     justify-content: center;
     align-items: center;
     padding: 0 1rem;
-    margin: 1rem 0 0 0;
+    margin: 1rem 0;
 }
 
 .genders {
+    flex-shrink: 0;
     padding: 0 .5rem 0 0;
     border-right: solid 1px $shadow-hint;
     margin: 0 1rem 0 0;
@@ -186,7 +187,7 @@ export default {
 }
 
 @media(max-width: $breakpoint) {
-    .actors {
+    .tiles {
         grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
     }
 }

assets/components/tags/tags.vue

@@ -147,7 +147,19 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
     grid-gap: .5rem;
 }
+
+@media(max-width: $breakpoint3) {
+    .tiles {
+        grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
+    }
+}
+
+@media(max-width: $breakpoint) {
+    .tiles {
+        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    }
+}
 </style>

assets/components/tile/release.vue

@@ -48,8 +48,10 @@
                 >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}</a>
             </span>
 
-            <router-link
-                :to="{ name: release.type || 'scene', params: { releaseId: release.id, releaseSlug: release.slug }, ...(referer && { hash: `#${referer}` }) }"
+            <a
+                :href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
+                target="_blank"
+                rel="noopener noreferrer"
                 class="link"
             >
                 <img
@@ -71,12 +73,14 @@
                     :title="release.title"
                     class="thumbnail"
                 >No thumbnail available</div>
-            </router-link>
+            </a>
         </span>
 
         <div class="info">
-            <router-link
-                :to="{ name: release.type || 'scene', params: { releaseId: release.id, releaseSlug: release.slug }, ...(referer && { hash: `#${referer}` }) }"
+            <a
+                :href="`/${release.type || 'scene'}/${release.id}/${release.slug}`"
+                target="_blank"
+                rel="noopener noreferrer"
                 class="row link"
             >
                 <h3
@@ -89,7 +93,7 @@
                         icon="film"
                     />{{ release.title }}
                 </h3>
-            </router-link>
+            </a>
 
             <span class="row">
                 <ul class="actors nolist">