Summary

We should document how users can add custom breakpoints in the responsive variants include and also warn users about the potential performance impact of turning on too many breakpoints.

Tasks

1. Add information about adding breakpoints with $theme-utility-breakpoints-custom somewhere near the instructions for customizing breakpoints with $theme-utility-breakpoints.
2. Consider adding a site note to this include that warns users that turning on breakpoints can have a significant impact on their compiled CSS.

There are some rough suggestions in the comment below:

Original comment:

I am thinking that we should add some additional notes about this setting to responsive-variants.html.

1. Suggesting we update the section to include a sentence like this:
   "Additionally, you can add custom breakpoints to your project by configuring the $theme-utility-breakpoints-custom setting. Learn more about the breakpoint settings on the Settings page."

   Before:
   

   After:
   

2. Additionally, it might be a good opportunity to add a yellow site note here that warns users that each breakpoint that is turned on makes a sizeable impact to the compiled CSS. (right now, adding a new breakpoint adds about 50kb to the total file size). Here is a possible draft note (this will probably need to be cleaned up):

   "Note: Turn on only the breakpoints you need in your project. Each enabled breakpoint will increase the size of your compiled CSS by a significant amount. To improve performance on your site, turn off any unused breakpoints."

Originally posted by @amyleadem in #2837 (comment)