These elements are created with the figures/image shortcodes from the old site.
Make them wide, and give them XL block margins.
Along the way, make sure that any element with only an <img> child has a line height
of 1 to avoid a weird gap below the image.
Bring over the youtube shortcode from the old theme, and add styles for the figures
it creates. Add the .figure--youtube class to the <figure> element.
In addition to the color scheme changing based on the system setting, enable
setting the color scheme explicitly by adding a color-scheme="light | dark" attribute
on the <html> element.
Doing this was a bit tricky. I originally implemented the grayscale ramp by
reversing it when prefers-color-scheme: dark. This was convenient, but meant that
setting the color scheme explicitly didn't work.
Along the way I discovered the light-dark() CSS function. Deploy that as the preferred
style if the browser supports it. Otherwise, fall back on the prefers-color-scheme
media queries. This function only works if color-scheme: light dark is set on the
:root element.
