Do some CSS and Migration guide cleanup (#36191)

* Do some CSS and Migration guide cleanup

- More code snippet tweaks
- Fix some homepage hero bugs
- Do a cleanup on Migration guide content to highlight more changes and fix some issues from merge conflicts

site/assets/scss/_component-examples.scss

@@ -82,6 +82,15 @@
 // Docs examples
 //
 
+.bd-example-snippet {
+  border: solid $border-color;
+  border-width: 1px 0;
+
+  @include media-breakpoint-up(md) {
+    border-width: 1px;
+  }
+}
+
 .bd-example {
   position: relative;
   padding: 1rem;
@@ -371,8 +380,6 @@
 
 .bd-code-snippet {
   margin: $spacer ($bd-gutter-x * -.5);
-  border: solid $border-color;
-  border-width: 1px 0;
 
   .highlight {
     margin-bottom: 0;
@@ -381,7 +388,6 @@
   @include media-breakpoint-up(md) {
     margin-right: 0;
     margin-left: 0;
-    border-width: 1px;
     @include border-radius($border-radius);
   }
 }

site/assets/scss/_masthead.scss

@@ -20,9 +20,13 @@
     color: $gray-700;
   }
 
+  .bd-code-snippet {
+    margin: 0;
+    @include border-radius(.5rem);
+  }
+
   .highlight {
     padding: .5rem 4rem .5rem 1rem;
-    margin-bottom: 0;
     line-height: 1.25;
     background-color: rgba(var(--bs-body-color-rgb), .075);
     @include border-radius(.5rem);

site/assets/scss/_syntax.scss

@@ -35,7 +35,7 @@
   font-weight: 600;
   color: #fff;
 }
-.gi { color: var(--base0C); }
+.gi { color: var(--bs-success); }
 .gp {
   font-weight: 600;
   color: var(--base04);