Several fixes for youtube figures

assets/css/050_figures.css

@@ -29,6 +29,11 @@
     justify-content: center;
   }
 
+  &:has(.youtube) {
+    display: block;
+    grid-template-columns: unset;
+  }
+
   > a:has(img:only-child) {
     grid-column: wide-gutter-start / wide-gutter-end;
   }
@@ -70,17 +75,13 @@
 }
 
 
-.figure--youtube {
-  grid-column: wide-gutter-start / wide-gutter-end;
+.figure .youtube {
+  width: 100%;
 
-  .youtube {
+  iframe {
+    aspect-ratio: 16 / 9;
+    margin-bottom: -3px;
     width: 100%;
-
-    iframe {
-      aspect-ratio: 16 / 9;
-      margin-bottom: -3px;
-      width: 100%;
-    }
   }
 }
 

layouts/shortcodes/youtube.html

@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<figure class="figure--youtube{{ with $class }}  {{ . }}{{ end }}">
+<figure class="figure{{ with $class }}  {{ . }}{{ end }}">
   <div class="youtube">
     <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
   </div>