lessToSass

themes/bootstrap3/scss/components/record.scss

@@ -12,6 +12,8 @@
   width: 105px;
   height: auto;
 }
+
+.media-body h1 { margin-top: 0; }
 @media (max-width: 767px) {
   .record .media-left,
   .record .media-right { display: block; }

themes/bootstrap3/scss/components/search.scss

@@ -111,6 +111,7 @@ header .container.navbar { margin-bottom: 0; }
 .record,
 .result {
   .media {
+    display: flex;
     flex: 1;
     margin: 0;
     padding-right: 10px;
@@ -118,77 +119,46 @@ header .container.navbar { margin-bottom: 0; }
   }
   .media-left,
   .media-right {
+    flex: none;
+    max-width: 25%;
     text-align: center;
+
+    a {
+      display: inline-block;
+      max-width: 100%;
+      text-align: center;
+      white-space: nowrap;
+      text-decoration: underline;
+    }
+
     img {
+      display: inline-block;
+      width: auto;
       max-width: 100%;
       max-height: 300px;
+      object-fit: contain;
     }
-    &.small img,
-    &.medium img,
-    &.large img {
-      display: inline-block;
-      width: $thumbnail-width-small;
-      max-width: none;
+
+    @media (min-width: 768px) {
+      &.small  { width: $thumbnail-width-small; }
+      &.medium { width: $thumbnail-width-medium; }
+      &.large  { width: $thumbnail-width-large; }
+      & > a { width: 100%; }
     }
   }
   .media-left { margin-right: 10px; }
   .media-right { margin-left: 10px; }
-
-  @media (min-width: 768px) {
-    .media-left,
-    .media-right {
-      max-width: 25%;
-
-      a {
-        display: inline-block;
-        max-width: 100%;
-        text-align: center;
-        white-space: nowrap;
-        text-decoration: underline;
-      }
-
-      &.small img,
-      &.medium img,
-      &.large img {
-        width: auto;
-        max-width: 100%;
-      }
-      &.small  a,
-      &.small  .ajaxcover div,
-      &.small  img { width: $thumbnail-width-small; }
-      &.medium a,
-      &.medium .ajaxcover div,
-      &.medium img { width: $thumbnail-width-medium; }
-      &.large  a,
-      &.large .ajaxcover div,
-      &.large  img { width: $thumbnail-width-large; }
-    }
-  }
-}
-
-.result {
-  @media (min-width: 768px) {
-    .media-left,
-    .media-right {
-      &.small img.ajax,
-      &.medium img.ajax,
-      &.large img.ajax {
-        max-width: initial;
-      }
-    }
-  }
+  .media-body { flex: 1; }
 }
 
 .ajaxcover .cover-container {
   display: none;
 }
-
-.record .media-left,
-.record .media-right {
-  &.small img,
-  &.medium img,
-  &.large img { width: auto; }
+.recordcover {
+  white-space: normal;
+  line-height: 1.15;
 }
+
 .result-body {
   padding: 0;
   padding-bottom: .25rem;