New style for Shared domain layer in index

Author: OStefan2001

public/css/app.css

@@ -155,15 +155,24 @@ section {
 }
 
 .core-band {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
   background: var(--surface-2);
   border: 1px solid var(--border-soft);
   border-left: 3px solid var(--teal);
   border-radius: var(--radius);
-  padding: 10px 26px;
+  padding: 32px 40px;
   margin-bottom: 40px;
+  margin-right: 0;
+  margin-left: 0;
+
+  // Bootstrap's border-start divider only reads as a divider once the
+  // columns sit side by side; stacked on mobile it would just look stray.
+  .border-start {
+    @media (max-width: 991.98px) {
+      border: none !important;
+      padding-left: 0 !important;
+      margin-top: 16px;
+    }
+  }
 }
 
 .core-band-label {
@@ -175,6 +184,7 @@ section {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 14px !important;
 
   &::before {
     content: "";
@@ -193,15 +203,15 @@ section {
   background: var(--teal-dim);
   border: 1px solid var(--teal);
   border-radius: 6px;
-  padding: 4px 10px;
-  margin: 0 6px 6px 0;
+  padding: 5px 12px;
+  margin: 0 8px 10px 0;
   display: inline-block;
 }
 
 .core-band p {
-  font-size: 15px;
-  line-height: 1.65;
-  max-width: 780px;
+  font-size: 15.5px;
+  line-height: 1.75;
+  margin: 0;
 }
 
 /* ============================================================

public/js/app.js

@@ -93,12 +93,16 @@
                 Three deployables that scale independently and never disagree about the domain.</p>
             </div>
 
-              <div class="core-band">
-                  <span class="core-band-label">Shared domain layer</span>
-                  <code>Core\App</code> <code>Core\Admin</code> <code>Core\User</code>
-                  <code>Core\Security</code> <code>Core\Setting</code>
-                  <p>One set of entities and repositories. Committed in each repo, so a single-component start just works. Commit it into its own repo and share it as a Git submodule when you add a second.</p>
-              </div>
+            <div class="core-band row align-items-center gy-3">
+                <div class="col-12 col-lg-6">
+                    <span class="core-band-label my-2">Shared domain layer</span><br>
+                    <code>Core\App</code> <code>Core\Admin</code> <code>Core\User</code>
+                    <code>Core\Security</code> <code>Core\Setting</code>
+                </div>
+                <div class="col-12 col-lg-6 border-start ps-lg-4">
+                    <p>One set of entities and repositories. Committed in each repo, so a single-component start just works. Commit it into its own repo and share it as a Git submodule when you add a second.</p>
+                </div>
+            </div>
 
             <div class="products-grid">