Break carousel out into its own component.

src/scss/viewer-core.scss

@@ -15,7 +15,7 @@ img,video {
   display: block;
 }
 
-.embla, .embla-thumbnails {
+.embla {
   position: relative;
   margin-left: auto;
   margin-right: auto;
@@ -27,13 +27,12 @@ img,video {
   flex: 1;
   min-height: 0;
 }
-.embla-thumbnails {
+frigate-card-thumbnail-carousel {
   flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
   margin-top: 5px;
-  //margin-bottom: 5px;
 }
 
-.embla__container, .embla-thumbnails__container {
+.embla__container {
   display: flex;
   width: 100%;
   height: 100%;
@@ -44,20 +43,20 @@ img,video {
   -webkit-tap-highlight-color: transparent;
 }
 
-.embla__viewport, .embla-thumbnails__viewport {
+.embla__viewport {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-.embla__viewport.is-draggable, .embla-thumbnails__viewport.is-draggable {
+.embla__viewport.is-draggable {
   cursor: move;
   cursor: grab;
 }
-.embla__viewport.is-dragging, .embla-thumbnails__viewport.is-dragging {
+.embla__viewport.is-dragging {
   cursor: grabbing;
 }
 
-.embla__slide, .embla-thumbnails__slide {
+.embla__slide {
   position: relative;
   height: 100%;
   margin-right: 5px;
@@ -66,16 +65,6 @@ img,video {
 .embla__slide {
   flex: 0 0 100%;
 }
-.embla-thumbnails__slide {
-  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
-  border-radius: 5px;
-  opacity: 0.4;
-  transition: opacity 0.2s;
-}
-.embla-thumbnails__slide.main-carousel-selected {
-  opacity: 1.0;
-}
-
 .embla__slide img,video {
   // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
   // its element.