search results from views

css/components/islandora_mods.css

@@ -27,20 +27,32 @@ div#site-header__inner {
    ========================================================================== */
 
 .grid-item {
-  margin-bottom: 1em;
+  margin-bottom: 2em;
   border: 1px solid #ccc;
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0px 5px 11px -2px rgb(0 0 0 / 39%);
+  display: flex;
+  gap: 1em;
 }
-.grid-item .views-field-did-image {
-  max-height: 360px;
-  overflow: hidden;
+
+.grid-item .image {
+  flex: 0 0 175px; /* don't grow, don't shrink, base width 175px */
+  width: 175px; /* belt-and-suspenders, some browsers want this too */
+  img {
+    width: 100%;
+    border: 1px solid #ccc;
+    padding: 4px;
+  }
+}
+.grid-item .metadata {
+  flex: 1 1 auto; /* grow to fill remaining space */
+  min-width: 0; /* prevents text/content overflow issues in the flex item */
 }
 .grid-item .views-field-did-image img {
   width: 100%;
 }
-.grid-item__title {
+.grid-item .title {
   display: block;
   padding: 0.5em 0;
   line-height: 1.2;
@@ -53,7 +65,7 @@ div#site-header__inner {
     text-decoration: none;
     font-family: var(--font-serif);
     color: #ba7d2b;
-    font-size: 1.1rem;
+    font-size: 1.5rem;
   }
 }