New menu modes and significant CSS cleanup.

src/frigate-hass-card.scss

@@ -1,23 +1,24 @@
 @use "@material/image-list/mdc-image-list";
 @use "@material/image-list";
 
+.frigate-card-contents {
+  width: 100%;
+}
+
 .frigate-card-viewer {
   width: 100%;
-  height: 100%;
-  position: absolute;
 }
 
 .frigate-card-gallery {
   overflow: auto;
-  position: absolute;
+  aspect-ratio: 16 / 9;
+  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
+  scrollbar-width: none;    /* Hide scrollbar: Firefox */
+}
 
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  height: 100%;
-
-  -ms-overflow-style: none; // Hide scrollbar: IE and Edge
-  scrollbar-width: none; // Hide scrollbar: Firefox
+/* Hide scrollbar for Chrome, Safari and Opera */
+.frigate-card-gallery::-webkit-scrollbar {
+  display: none;
 }
 
 .frigate-card-attention {
@@ -27,39 +28,13 @@
   height: 100%;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.frigate-card-gallery::-webkit-scrollbar {
-  display: none;
-}
-
 .frigate-card-image-list {
-  @include image-list.standard-columns(5);
+  @include image-list.standard-columns(5, 0px);
   @include image-list.shape-radius(5px);
 }
 
-.frigate-card-image-list-icon-overlay {
-  position: absolute;
-  margin: auto;
-}
-
-.frigate-card-image-list-highlight {
-  // Put border inside.
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-
-  opacity: 0.5;
-
-  border-style: dashed;
-  border-width: 1px;
-  border-color: var(--primary-color);
-}
-
-.invisible {
-  visibility: hidden;
-}
-.visibile {
-  visibility: visible;
+video, img {
+  display: block;
 }
 
 ha-card {
@@ -70,4 +45,12 @@ ha-card {
   width: 100%;
   height: 100%;
   position: relative;
+  background-color: var(--secondary-background-color, black);
 }
+
+/* Don't drop shadow or have radius for nested cards: webrtc */
+ha-card ha-card {
+  box-shadow: none;
+  border-radius: 0px;
+  background-color: var(--secondary-background-color, black);
+}