MC-3805: Write dev docs for responsive mobile images

- Edited/rewrote to be make intent and instructions more explicit.

Author: bdenham

app/code/Magento/PageBuilder/docs/custom-themes.md

@@ -61,28 +61,37 @@
 [How to create custom PageBuilder content type container]: how-to-create-custom-content-type-container.md
 
 ## What's in this topic
-This topic describes Page Builder specifics for usage with custom themes.  
+This topic describes how to use your custom themes to control responsive layouts within Page Builder.
 
 ## Responsive Mobile Images
-Within Page Builder we have dynamic style generation for our mobile background images for containers. This functionality requires the mobile breakpoint to be specified, if different from the modules configuration, within your theme.
-
-The module provides this configuration default within `Magento_PageBuilder/etc/view.xml`. We use the industry standard maximum width of 768px for the mobile image breakpoint.
+By default, when you configure Page Builder to render a background image for a container, it uses a mobile image when the container's width is less than the industry-standard max-width of 768px. This width is configured within `Magento_PageBuilder/etc/view.xml`, as follows:
 ```xml
 <vars module="Magento_PageBuilder">
     <var name="breakpoints">
-        <var name="mobile">768px</var>
+        <var name="mobile">
+            <var name="conditions">
+                <var name="max-width">768px</var>
+            </var>
+        </var>
     </var>
 </vars>
 ```
 
-If your theme utilises this breakpoint for your mobile layout no additional configuration is required.
+If your custom theme also uses this max-width breakpoint for your mobile layout, no additional configuration is required.
 
-If your theme does have a different mobile breakpoint you'll need to configure this value within your theme. This can be done within your themes `view.xml` by including the following within the `<view />` node:
+However, if your custom theme uses a different mobile breakpoint, you'll need to add that breakpoint (in pixels) to your theme's `view.xml` by including the following XML within the `<view />` node, and replacing `CUSTOM-BREAKPOINT` with the integer value of your theme's breakpoint, as follows:
 ```xml
 <vars module="Magento_PageBuilder">
     <var name="breakpoints">
-        <var name="mobile">BREAKPOINTpx</var>
+        <var name="mobile">
+            <var name="conditions">
+                <var name="max-width">CUSTOM-BREAKPOINTpx</var>
+            </var>
+        </var>
     </var>
 </vars>
 ```
-You need to replace `BREAKPOINT` with the integer value of your themes breakpoint.
+
+This directs Page Builder to use your theme's mobile breakpoint instead of its default breakpoint of 768px. Other responsive breakpoints from your custom theme can be added in the same way.
+
+[Note: I think it might be nice to include another example or two of configuring other breakpoints (or other styles?) from custom themes as relevant.]