Update responsive embeds docs

The current text still mentions the rich-text class (which is now formally deprecated) alongside responsive-object (which is not deprecated, but off by default). Split up the CSS snippet to make it clear that these are two distinct cases, and eliminate use of rich-text.

docs/topics/writing_templates.rst

@@ -127,15 +127,21 @@ Only fields using ``RichTextField`` need this applied in the template.
 Responsive Embeds
 -----------------
 
-By default, Wagtail includes embeds and images at their full width, which may overflow the bounds of the content container you've defined in your templates. To address this, Wagtail provides the ability to make images and embeds responsive -- meaning they'll resize to fit their container. Responsive embeds can be enabled by setting ``WAGTAILEMBEDS_RESPONSIVE_HTML = True`` in your project settings; this adds a CSS class of ``responsive-object`` and an inline ``padding-bottom`` style to the embed, to be used in conjunction with CSS such as the following:
+As Wagtail does not impose any styling of its own on templates, images and embedded media will be displayed at a fixed width as determined by the HTML. Images can be made to resize to fit their container using a CSS rule such as the following:
 
 .. code-block:: css
 
-    .rich-text img {
+    .body img {
         max-width: 100%;
         height: auto;
     }
 
+where ``body`` is a container element in your template surrounding the images.
+
+Making embedded media resizable is also possible, but typically requires custom style rules matching the media's aspect ratio. To assist in this, Wagtail provides built-in support for responsive embeds, which can be enabled by setting ``WAGTAILEMBEDS_RESPONSIVE_HTML = True`` in your project settings. This adds a CSS class of ``responsive-object`` and an inline ``padding-bottom`` style to the embed, to be used in conjunction with the following CSS:
+
+.. code-block:: css
+
     .responsive-object {
         position: relative;
     }