Improve CSS encapslation (Chrome).

src/scss/button.scss

@@ -14,7 +14,3 @@ ha-icon-button.button {
 ha-icon-button.button.emphasize {
   color: var(--primary-color, white);
 }
-
-video, img {
-  display: block;
-}

src/scss/card.scss

@@ -1,5 +1,3 @@
-@use './common.scss';
-
 .container_16_9 {
   /* 16:9 Aspect Ratio. When Safari supports 'aspect-ratio' this should not be
      necessary */
@@ -65,7 +63,6 @@ ha-card {
   color: var(--secondary-text-color, white);
   background-color: var(--secondary-background-color, black);
 
-  transform-style: preserve-3d; /* Safari brings video elements forward without this */
 }
 
 ha-card a {

src/scss/menu.scss

@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .frigate-card-menu {
   z-index: 1;
@@ -37,4 +37,4 @@
 .frigate-card-menu.full {
   width: 100%;
   background: var(--secondary-background-color);
-}
+}

src/scss/next-previous-control.scss

@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .controls {
   position: absolute;
@@ -36,4 +36,4 @@
 
 .controls.next.thumbnails:hover {
   right: 33px;
-}
+}

src/scss/viewer.scss

@@ -1,3 +1,4 @@
-img.media,video.media,canvas.media {
+img,video {
   width: 100%;
+  height: 100%;
 }