Converting from sass to nested vanilla css with layers (#147)

assets/css/components/_responsive-video.css

@@ -0,0 +1,32 @@
+/* Responsive video
+
+Using a wrapper div, embedded videos can be made responsive so that their
+intrinsic aspect ratio is preserved at any screen width. The
+`responsive-video__embed` class is optional if the embed is an `iframe`.
+
+.responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
+default 16:9 one. */
+
+@layer components {
+  .responsive-video {
+    --aspect-ratio: 9 / 16; /* 16:9 aspect ratio */
+
+    position: relative;
+    padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */
+    padding-block-start: 25px; /* Height of video controls */
+    height: 0;
+
+    iframe,
+    .responsive-video__embed {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .responsive-video--4-3 {
+    --aspect-ratio: 3 / 4; /* 4:3 aspect ratio */
+  }
+}