From 3b8c17029f605726bdb65bd277ac142aec0d37ae Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 22 Sep 2020 16:33:18 -0700
Subject: [PATCH] Move styles to docs CSS

---
 site/assets/scss/_component-examples.scss |  5 ++++-
 site/content/docs/5.0/helpers/ratio.md    | 14 +++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 4f031eec5c..18b2c192e7 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -164,10 +164,13 @@
     margin-top: .5rem;
     margin-bottom: .5rem;
   }
+}
 
-  // Responsive embed helpers
+// Ratio helpers
+.bd-example-ratios {
   .ratio {
     display: inline-block;
+    width: 10rem;
     color: $gray-600;
     background-color: $gray-100;
     border: $border-width solid $border-color;
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md
index 6feaab248e..10ea9bc39c 100644
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.0/helpers/ratio.md
@@ -28,17 +28,17 @@ Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an asp
 
 Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
 
-{{< example html >}}
-<div class="ratio ratio-1x1" style="width: 10rem;">
+{{< example class="bd-example-ratios" >}}
+<div class="ratio ratio-1x1">
   <div class="ratio-item">1x1</div>
 </div>
-<div class="ratio ratio-4x3" style="width: 10rem;">
+<div class="ratio ratio-4x3">
   <div class="ratio-item">4x3</div>
 </div>
-<div class="ratio ratio-16x9" style="width: 10rem;">
+<div class="ratio ratio-16x9">
   <div class="ratio-item">16x9</div>
 </div>
-<div class="ratio ratio-21x9" style="width: 10rem;">
+<div class="ratio ratio-21x9">
   <div class="ratio-item">21x9</div>
 </div>
 {{< /example >}}
@@ -49,8 +49,8 @@ Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the se
 
 For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
 
-{{< example html >}}
-<div class="ratio" style="--aspect-ratio: 50%; width: 10rem;">
+{{< example class="bd-example-ratios" >}}
+<div class="ratio" style="--aspect-ratio: 50%;">
   <div class="ratio-item">2x1</div>
 </div>
 {{< /example >}}