Refactor carousel into separate components.

src/scss/carousel.scss

@@ -4,16 +4,9 @@
   width: 100%;
 }
 
-img,video {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
 .embla {
   width: 100%;
   height: 100%;
-  position: relative;
   margin-left: auto;
   margin-right: auto;
 }
@@ -28,10 +21,10 @@ img,video {
   -khtml-user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
-:host([direction=vertical]) .embla__container {
+:host([direction='vertical']) .embla__container {
   flex-direction: column;
 }
-:host([direction=horizontal]) .embla__container {
+:host([direction='horizontal']) .embla__container {
   flex-direction: row;
 }
 
@@ -53,18 +46,10 @@ img,video {
   cursor: grabbing;
 }
 
-.embla__slide {
-  position: relative;
-  overflow: visible;
-}
-:host([direction=vertical]) .embla__slide {
+:host([direction='vertical']) ::slotted(.embla__slide) {
   margin-bottom: 5px;
 }
-:host([direction=horizontal]) .embla__slide {
+
+:host([direction='horizontal']) ::slotted(.embla__slide) {
   margin-right: 5px;
 }
-.embla__slide img,video {
-  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
-  // its element.
-  object-fit: contain;
-}