Drastic actor page redesign. Storing one avatar per actor, other profile photos as 'photo' role; no longer assuming first photo is avatar.

public/css/style.css

@@ -45,6 +45,7 @@
   display: flex;
   justify-content: space-between;
   padding: .5rem 1rem;
+  z-index: 1;
   font-size: 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
 }
@@ -170,12 +171,12 @@
 }
 .title[data-v-3abcf101] {
   color: #222;
-  margin: 0;
+  margin: 0 .25rem .25rem 0;
   font-size: 1rem;
-  word-wrap: break-word;
-  overflow: hidden;
   max-height: 3rem;
-  line-height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .network[data-v-3abcf101] {
   color: #555;
@@ -189,9 +190,9 @@
   line-height: 1.5rem;
 }
 .tags[data-v-3abcf101] {
-  max-height: 2.85rem;
+  max-height: 2.5rem;
   padding: .25rem .5rem 1rem .5rem;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
   word-wrap: break-word;
   overflow-y: hidden;
 }
@@ -217,10 +218,11 @@
   color: rgba(0, 0, 0, 0.5);
   display: inline-block;
   padding: .25rem;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   font-size: .75rem;
   font-weight: bold;
   text-decoration: none;
+  line-height: 1;
+  border: solid 1px rgba(0, 0, 0, 0.1);
 }
 .tag-link[data-v-3abcf101]:hover {
     color: #ff6c88;
@@ -234,13 +236,18 @@
 .heading .range[data-v-22ffe3e4] {
     text-transform: capitalize;
 }
-.releases[data-v-22ffe3e4] {
+.tiles[data-v-22ffe3e4] {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 0.5fr));
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 0.33fr));
   grid-gap: 1rem;
 }
+@media (max-width: 1500px) {
+.tiles[data-v-22ffe3e4] {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 0.5fr));
+}
+}
 @media (max-width: 720px) {
-.releases[data-v-22ffe3e4] {
+.tiles[data-v-22ffe3e4] {
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
 }
@@ -575,48 +582,267 @@
 }
 
 /* $primary: #ff886c; */
-.header[data-v-677a8360] {
+.actor-inner[data-v-677a8360] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow-x: auto;
+}
+.profile[data-v-677a8360] {
+  background: #222;
+  color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+.profile .avatar-link[data-v-677a8360] {
+    font-size: 0;
+    padding: 1rem;
+}
+.profile .avatar[data-v-677a8360] {
+    height: 15rem;
+    width: 15rem;
+    flex-shrink: 0;
+    margin: 0 1rem 0 0;
+    -o-object-fit: cover;
+       object-fit: cover;
+    -o-object-position: 50% 0;
+       object-position: 50% 0;
+}
+.bio[data-v-677a8360] {
+  flex-grow: 1;
+  min-width: 18rem;
+  box-sizing: border-box;
+  padding: 1rem;
+  margin: 0 3rem 0 0;
+}
+.bio-header[data-v-677a8360] {
   display: flex;
   justify-content: space-between;
-  padding: 1rem;
+  align-items: center;
+  margin: 0 0 1rem 0;
 }
-.title[data-v-677a8360] {
+.bio-item[data-v-677a8360] {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 .5rem 0;
+  line-height: 1.75;
+  text-align: right;
+  font-size: .9rem;
+  font-weight: bold;
+}
+.bio-heading[data-v-677a8360] {
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: normal;
+  font-style: normal;
+}
+.bio-heading .icon[data-v-677a8360] {
+    fill: rgba(255, 255, 255, 0.5);
+    margin: 0 .5rem 0 0;
+}
+.flag[data-v-677a8360] {
+  margin: 0 .25rem 0 0;
+}
+.bio-name[data-v-677a8360] {
   display: inline-block;
-  margin: 0 .5rem 0 0;
+  padding: 0;
+  margin: 0;
+}
+.bio-gender[data-v-677a8360] {
+  display: inline-block;
+  font-weight: bold;
+  text-transform: capitalize;
+  font-weight: normal;
+}
+.bio-gender .icon[data-v-677a8360] {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+.bio-gender.female .icon[data-v-677a8360] {
+    fill: #f0a;
+}
+.bio-gender.male .icon[data-v-677a8360] {
+    fill: #0af;
+}
+.birthdate[data-v-677a8360] {
+  display: block;
+}
+.age[data-v-677a8360] {
+  font-weight: bold;
+  padding: 0 0 0 .5rem;
+  border-left: solid 1px rgba(255, 255, 255, 0.2);
+  margin: 0 0 0 .5rem;
+  /*
+    &::before {
+        content: ' (';
+    }
+
+    &::after {
+        content: ')';
+    }
+
+    &::before,
+    &::after {
+        color: $highlight;
+    }
+    */
+}
+.country[data-v-677a8360] {
+  display: block;
+}
+.height-imperial[data-v-677a8360],
+.weight-imperial[data-v-677a8360] {
+  padding: 0 0 0 .5rem;
+  border-left: solid 1px rgba(255, 255, 255, 0.2);
+  margin: 0 0 0 .5rem;
+}
+.enhanced.icon[data-v-677a8360] {
+  fill: #ff6c88;
+  padding: 0 .5rem;
+}
+.description[data-v-677a8360] {
+  max-height: 10rem;
+  flex-grow: 1;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 1rem 0 0 0;
+  margin: 0 2rem 0 0;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  font-size: .9rem;
+  overflow: hidden;
+  cursor: pointer;
+}
+.description.expanded[data-v-677a8360] {
+    overflow: visible;
+}
+.social[data-v-677a8360] {
+  display: block;
+  margin: 1rem 0;
+}
+.social-link[data-v-677a8360] {
+  display: inline-block;
+  padding: 0 1rem 0 0;
+}
+.social-link .icon[data-v-677a8360] {
+    fill: rgba(255, 255, 255, 0.5);
+    width: 1.5rem;
+    height: 1.5rem;
+}
+.social-link:hover .icon[data-v-677a8360] {
+    fill: #ff6c88;
+}
+.scraped[data-v-677a8360] {
+  color: rgba(255, 255, 255, 0.2);
+  margin: 1rem 0 0 0;
+  font-size: .8rem;
+}
+.actor-content[data-v-677a8360] {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
 }
 .heading[data-v-677a8360] {
   padding: 0;
   margin: 0 0 1rem 0;
 }
-.bio-heading[data-v-677a8360] {
-  display: inline-block;
-  font-weight: bold;
-  margin: .5rem 0 0 0;
+.photos-container[data-v-677a8360] {
+  min-width: 15rem;
+  box-sizing: border-box;
+  border-right: solid 1px rgba(0, 0, 0, 0.1);
+  padding: 1rem 1.5rem 1rem 1rem;
+  margin: 0 .5rem 0 0;
 }
-.bio-heading[data-v-677a8360]::after {
-    content: ':';
+.photos[data-v-677a8360] {
+  max-width: 35vw;
+  display: inline-grid;
+  grid-template-columns: repeat(auto-fit, 15rem);
+  grid-gap: .5rem;
+  font-size: 0;
 }
-.description[data-v-677a8360] {
-  padding: 1rem;
+.photos .avatar-link[data-v-677a8360] {
+    display: none;
 }
-.avatar[data-v-677a8360] {
-  height: 20rem;
-  margin: 0 1rem 0 0;
-  display: block;
+.photo-link[data-v-677a8360] {
+  height: 15rem;
 }
 .photo[data-v-677a8360] {
-  height: 10rem;
-}
-.social[data-v-677a8360] {
-  display: block;
-}
-.flag[data-v-677a8360] {
-  height: 1rem;
-  border: solid 1px rgba(0, 0, 0, 0.2);
-  margin: 0 .25rem 0 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: 50% 0;
+     object-position: 50% 0;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 }
 .releases[data-v-677a8360] {
   flex-grow: 1;
+  padding: 1rem;
+}
+@media (max-width: 1500px) {
+.description[data-v-677a8360] {
+    display: none;
+}
+}
+@media (max-width: 1200px) {
+.profile .avatar-link[data-v-677a8360],
+  .social[data-v-677a8360] {
+    display: none;
+}
+.actor-content[data-v-677a8360] {
+    flex-direction: column;
+}
+.photos-container[data-v-677a8360] {
+    border: none;
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    padding: 1rem 1rem 1.5rem 1rem;
+    margin: 0 0 .5rem 0;
+}
+.photos[data-v-677a8360] {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    overflow-x: scroll;
+    scrollbar-width: none;
+}
+.photos .avatar-link[data-v-677a8360] {
+      display: inline-block;
+}
+.photos[data-v-677a8360]::-webkit-scrollbar {
+      display: none;
+}
+.photo-link[data-v-677a8360] {
+    height: 15rem;
+    flex-shrink: 0;
+    margin: 0 .5rem 0 0;
+}
+}
+@media (max-width: 720px) {
+.profile[data-v-677a8360] {
+    flex-direction: column;
+    padding: 0 0 .5rem 0;
+}
+.bio[data-v-677a8360] {
+    width: 100%;
+    padding: 0 1rem;
+    margin: 0;
+}
+.bio-header[data-v-677a8360] {
+    margin: 1rem 0;
+}
+.place[data-v-677a8360],
+  .ethnicity[data-v-677a8360],
+  .residence[data-v-677a8360],
+  .weight[data-v-677a8360],
+  .scraped[data-v-677a8360] {
+    display: none;
+}
+.social[data-v-677a8360] {
+    padding: 0 1rem;
+}
 }
 
 /* $primary: #ff886c; */
@@ -765,7 +991,7 @@ body {
     display: inline-block; }
 
 .heading {
-  color: #ff6c88;
+  color: rgba(0, 0, 0, 0.5);
   padding: 0;
   margin: 0 0 1rem 0;
   font-size: 1.5rem; }