Refactor thumbnail sizing.

src/scss/gallery.scss

@@ -1,8 +1,6 @@
-@use "const.scss";
-
 :host {
   width: 100%;
-  height: 100%;
+  height: auto;
   overflow: auto;
 
   // Hide scrollbar: IE and Edge
@@ -16,8 +14,8 @@
 
   display: grid;
   grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
-  grid-auto-rows: var(--frigate-card-thumbnail-size);
-  grid-column-gap: var(--frigate-card-gallery-gap);
+  grid-auto-rows: 1fr;
+  gap: var(--frigate-card-gallery-gap);
 }
 
 // Hide scrollbar for Chrome, Safari and Opera
@@ -32,16 +30,21 @@ ha-card {
   box-sizing: border-box;
   text-align: center;
   opacity: 0.7;
-  color: var(--secondary-text-color, white);
-  border: 2px ridge var(--secondary-text-color, black);
+  color: var(--primary-text-color, white);
+  border: 2px ridge var(--primary-text-color, black);
   border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
   line-height: 1;
   overflow: hidden;
+
+  transition: transform 0.2s linear;
+}
+ha-card:hover {
+  transform: scale(1.04)
 }
 
-:host(:not([details])) ha-card,
-:host(:not([details])) frigate-card-thumbnail {
-  aspect-ratio: 1 / 1;
-}
+ha-card, frigate-card-thumbnail {
+  height: 100%;
+  max-height: var(--frigate-card-thumbnail-size);
+}