Use callout without custom Jekyll plugin.

docs/4.0/layout/media-object.md

@@ -22,13 +22,14 @@ Below is an example of a single media object. Only two classes are required—th
 </div>
 {% endexample %}
 
-{% callout warning %}
+{% capture callout %}
 ##### Flexbug #12: Inline elements aren't treated as flex items
 
 Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/), as an easy fix.
 
 **Source:** [Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items)
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
 
 ## Nesting
 

docs/4.0/layout/overview.md

@@ -103,8 +103,7 @@ We occasionally use media queries that go in the other direction (the given scre
 // No media query since the extra-large breakpoint has no upper bound on its width
 {% endhighlight %}
 
-{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-info-mediaqueries-breakpoints.md %}
 
 Once again, these media queries are also available via Sass mixins: