Rearrange all the docs to allow for a docs/major.minor/ setup

assets/scss/_featurettes.scss

@@ -0,0 +1,97 @@
+.bd-featurette {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #555;
+  text-align: center;
+  background-color: #fff;
+  border-top: 1px solid #eee;
+
+  .highlight {
+    text-align: left;
+  }
+
+  .lead {
+    margin-right: auto;
+    margin-bottom: 2rem;
+    margin-left: auto;
+    font-size: 1rem;
+    text-align: center;
+  }
+
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-sm-6:first-child {
+      padding-right: ($grid-gutter-width-base * 1.5);
+    };
+    .col-sm-6:last-child {
+      padding-left: ($grid-gutter-width-base * 1.5);
+    }
+  }
+}
+
+.bd-featurette-title {
+  margin-bottom: .5rem;
+  font-size: 2rem;
+  font-weight: normal;
+  color: #333;
+  text-align: center;
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem auto;
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+.bd-featurette h4 {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: normal;
+  color: #333;
+}
+.bd-featurette-img {
+  display: block;
+  margin-bottom: 1.25rem;
+  color: #333;
+}
+.bd-featurette-img:hover {
+  color: $brand-primary;
+  text-decoration: none;
+}
+.bd-featurette-img img {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 480px) {
+  .bd-featurette .img-fluid {
+    margin-top: 2rem;
+  }
+}
+@media (min-width: 768px) {
+  .bd-featurette {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+  .bd-featurette-title {
+    font-size: 2.5rem;
+
+    + .lead {
+      font-size: 1.5rem;
+    }
+  }
+  .bd-featurette .lead {
+    max-width: 80%;
+  }
+  .bd-featurette .img-fluid {
+    margin-top: 0;
+  }
+}