docs: use grid for videos in smaller formats.

Unleash · Jan 26, 2022 · 2a6504e · 2a6504e
1 parent 132cba7
commit 2a6504e
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -76,42 +76,46 @@ html[data-theme='dark'] .header-github-link:before {
 /*     } */
 /* } */
 
-
 .unleash-video-container {
     display: grid;
-    --gap: .5em;
+    --gap: 0.5em;
     --border-radius: var(--ifm-alert-border-radius);
     gap: var(--gap);
     margin-bottom: 1em;
 }
 
-@media screen and (min-width: 450px) {
-    .unleash-video-container {
-        grid-template-columns: 1fr min(250px, 25%);
-    }
-}
-
 .unleash-video-container p {
     background: var(--ifm-color-success-contrast-background);
     border-radius: var(--border-radius);
 }
 
-.unleash-video-container > .videos  {
-    display: flex;
-    flex-direction: column;
+.unleash-video-container > .videos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: var(--gap);
 }
 
-.unleash-video-container  .video-wrapper  {
-    padding: .5rem;
+.unleash-video-container .video-wrapper {
+    padding: 0.5rem;
     border-radius: var(--border-radius);
     background: var(--ifm-color-info-contrast-background);
 }
 
-.unleash-video-container iframe  {
+.unleash-video-container iframe {
     aspect-ratio: 16/9;
 }
 
 .unleash-video-container > .admonition {
     margin: 0;
 }
+
+@media screen and (min-width: 450px) {
+    .unleash-video-container {
+        grid-template-columns: 1fr min(250px, 25%);
+    }
+    .unleash-video-container > .videos {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap);
+    }
+}