added space around in media, changed view for small screens

asset/scss/components/_lists.scss

@@ -1,9 +1,26 @@
+@include breakpoint(small) {
   dl {
     .property {
       display:flex;
+      flex-direction:column;
       dt {
-        width: 14rem;
+        min-width: unset;
-        max-width: 14rem;
+        max-width: unset;
+        width: unset;
       }
     }
   }
+}
+@include breakpoint(medium) {
+  dl {
+    .property {
+      display:flex;
+      flex-direction:row;
+      dt {
+        min-width: 14rem;
+        max-width: 14rem;
+        width: 14rem;
+      }
+    }
+  }
+}

asset/scss/global/_omeka.scss

@@ -137,14 +137,25 @@
 
 // -- Modules
 .media-list {
-  width: 100%;
+  @include breakpoint(small) {
-  .resource-link {
+    display: flex;
-    width: auto;
+    flex-direction: column;
-    display:inline-block;
+    width: 100%;
-    > * {
+    .resource-link {
-      float: left;
+      width: auto;
-      clear: both;
+      display:inline-block;
+      padding-right: $global-padding;
+      > * {
+        float: left;
+        clear: both;
+      }
     }
+    .resource-name {
+      font-size: 0.8rem;
+    }
+  }
+  @include breakpoint(medium) {
+    flex-direction: row;
   }
 }