Fix YouTube figures and add a .content-width CSS class

assets/styles/root/002_layout.css

@@ -180,7 +180,6 @@
 
   figure .youtube {
     overflow: hidden;
-    max-width: var(--content-width);
     width: 100%;
   }
 

assets/styles/root/099_utility.css

@@ -1,6 +1,8 @@
 @layer utility {
     .centered { text-align: center; }
 
+    .content-width { grid-column: content-start / content-end; }
+
     .float-right {
         float: right;
         justify-self: end;

layouts/shortcodes/figures/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>
+<figure {{ with $class }}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>