Sync thumbnail styles between carousel and gallery.

src/components/gallery.ts

@@ -146,8 +146,8 @@ export class FrigateCardGalleryCore extends LitElement {
     }
 
     const styles = {
-      // Controls the number of columns in the gallery (allows for 1px gutter).
+      // Controls the number of columns in the gallery (allows for 5px gutter).
-      width: `calc(${100 / this._columns}% - 1.2px)`,
+      width: `calc(${100 / this._columns}% - 5.25px)`,
     };
 
     return html` <ul class="mdc-image-list frigate-card-gallery">

src/scss/gallery.scss

@@ -18,20 +18,27 @@
 .frigate-card-gallery {
   // Note: In fullscreen, number of columns is overwritten in Javascript based
   // on dimensions.
-  @include image-list.standard-columns(5, 1px);
+  @include image-list.standard-columns(4, 5px);
   @include image-list.shape-radius(5px);
 }
 
+.frigate-card-gallery .mdc-image-list__image {
+  transition: transform 0.3s ease;
+}
+.frigate-card-gallery .mdc-image-list__image:hover {
+  transform: scale(1.05);
+}
+
 ha-card.frigate-card-gallery-folder {
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   text-align: center;
-  border-style: 2px solid;
   opacity: 0.7;
   color: var(--secondary-text-color, white);
-  border-color: var(--secondary-text-color, black);
+  border: 2px ridge var(--secondary-text-color, black);
+  border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
   height: 100%;

src/scss/thumbnail-carousel.scss

@@ -12,7 +12,7 @@
   opacity: 1.0;
 }
 .embla__slide:hover {
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 .embla__slide img {
   border-radius: 5px;