diff --git a/zzzeeksphinx/themes/zsbase/layout.mako b/zzzeeksphinx/themes/zsbase/layout.mako
index 969b6df..f25fa0a 100644
--- a/zzzeeksphinx/themes/zsbase/layout.mako
+++ b/zzzeeksphinx/themes/zsbase/layout.mako
@@ -88,31 +88,34 @@ withsidebar = bool(toc) and (
 </%block>
 
 
-<div id="docs-top-navigation-container" class="body-background">
+<div id="docs-top-navigation-container" class="body-background row">
 <div id="docs-header">
+    <h1><a href="${pathto('index')}">${docstitle|h}</a></h1>
+
     <div id="docs-version-header">
-        Release: <span class="version-num">${release}</span>
-
-        % if is_beta_version:
-            <span id="sidebar-beta">beta release</span>
-        % elif is_prerelease_version:
-            <span id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</span>
-        % elif is_legacy_version:
-            <span id="sidebar-legacy">legacy version</span>
-        % elif is_current_version:
-            <span id="sidebar-current">current release</span>
-        % endif
+        <div>
+            Release: <span class="version-num">${release}</span>
 
-        % if release_date:
-        | Release Date: ${release_date}
-        % else:
-        | Release Date: <b>not released yet</b>
-        % endif
+            % if is_beta_version:
+                <span id="sidebar-beta">beta release</span>
+            % elif is_prerelease_version:
+                <span id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</span>
+            % elif is_legacy_version:
+                <span id="sidebar-legacy">legacy version</span>
+            % elif is_current_version:
+                <span id="sidebar-current">current release</span>
+            % endif
+        </div>
 
+        <div>
+            % if release_date:
+            Release Date: ${release_date}
+            % else:
+            Release Date: <b>not released yet</b>
+            % endif
+        </div>
     </div>
 
-    <h1><a href="${pathto('index')}">${docstitle|h}</a></h1>
-
 </div>
 </div>
 
@@ -146,16 +149,6 @@ withsidebar = bool(toc) and (
     % if withsidebar:
 
         <div id="docs-sidebar-popout">
-            <h3><a href="${pathto('index')}">${docstitle|h}</a></h3>
-            % if is_beta_version:
-                <p id="sidebar-beta">beta release</p>
-            % elif is_prerelease_version:
-                <p id="sidebar-prerelease">${"in development" if not release_date else "pre release"}</p>
-            % elif is_legacy_version:
-                <p id="sidebar-legacy">legacy version</p>
-            % elif is_current_version:
-                <p id="sidebar-current">current release</p>
-            % endif
             <p id="sidebar-topnav">
                 <a href="${pathto('index')}">Home</a>
                 % if zip_url:
@@ -284,14 +277,20 @@ withsidebar = bool(toc) and (
 </div>
 
 <div id="docs-bottom-navigation" class="docs-navigation-links${', withsidebar' if withsidebar else ''}">
-    % if prevtopic:
-        Previous:
-        <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
-    % endif
-    % if nexttopic:
-        Next:
-        <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
-    % endif
+    <div class="docs-bottom-navigation--nextprev">
+        % if prevtopic:
+            <div>
+                Previous:
+                <a href="${prevtopic['link']|h}" title="${_('previous chapter')}">${prevtopic['title']}</a>
+            </div>
+        % endif
+        % if nexttopic:
+            <div>
+                Next:
+                <a href="${nexttopic['link']|h}" title="${_('next chapter')}">${nexttopic['title']}</a>
+            </div>
+        % endif
+    </div>
 
     <div id="docs-copyright">
     % if hasdoc('copyright'):
diff --git a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
index 65bb65f..6ad5878 100644
--- a/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
+++ b/zzzeeksphinx/themes/zzzeeksphinx/static/docs.scss
@@ -28,18 +28,26 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+:root {
+    --bs-gutter-x: 1.5rem;
+}
 
 $primary-font-family: "Libre Franklin", sans-serif;
 $header-font-family: "Libre Franklin", Arial, sans-serif;
 $top-header-font-family: "Libre Franklin", Arial, sans-serif;
 $sidebar-font-family: "Libre Franklin", Verdana, sans-serif;
 
+$mobile-max-screen-width: 480px;
 $narrow-max-screen-width: 980px;
+$large-min-screen-width: 1024px;
+$xl-min-screen-width: 1400px;
+$xxl-min-screen-width: 1600px;
 
 $primary-background-color: #fdfbfc;
+$body-background-color: #fff;
 $topmost-header-color: #ebebee;
 $popout-color: #fbfbee;
-$sidebar-color: #efefef;
+$sidebar-border-color: #e9eaeb;
 $sidebar-header-background-color: #dddddd;
 $sidebar-header-color: #222222;
 $notebox-background-color: #eeffef;
@@ -49,16 +57,16 @@ $legacy-background-color: #fcffc0;
 $warning-background-color: #fcf0f6;
 $deepalchemy-background-color: #f6e8fd;
 $versionchanged-background-color: #f9f9d9;
-$border-style: 1px solid #ccc;
-$divider-line-style: 1px solid #ccc;
+$border-color: #e6e9ec;
+$border-style: 1px solid $border-color;
+$divider-line-style: 1px solid #e6e9ec;
 
-$box-shadow-style: 2px 2px 3px #dfdfdf;
-$box-top-margin: 10px;
-$box-margin: $box-top-margin 10px 20px 0px;
+$box-top-margin: 50px;
+$box-margin: $box-top-margin 0px 50px 0px;
 
 // this is optimized for the site.  with the vanilla docs, the
 // vertical padding is too much.   not sure how to fix
-$box-padding: 1rem 1em 2px 1rem;
+$box-padding: 1rem;
 
 // looks better with vanilla docs but not w/ the site
 // $box-padding: 0 1em 0 1rem;
@@ -66,25 +74,26 @@ $box-padding: 1rem 1em 2px 1rem;
 $box-title-padding: 0 2em 0 1.5em;
 $box-header-color: #c5cec2;
 $box-background-color: #f8f9f0;
+$box-border-radius: 4px;
 
-$hyperlink-color: #990000;
+$hyperlink-color: #f00000;
 $keyword-color: #480717;
 $keyword-background-color: #f2f2f2;
 
-$highlighted-nav-link-background-color: #ddd;
+$highlighted-nav-link-background-color: #e8e8e8;
 $orm-background-color: #e2f3f4;
 $core-background-color: #aecaf7;
 
-$sidebar-popout-height: 160px;
+$sidebar-popout-height: 130px;
 
 $max-container-width: 100em; // 100 * 16 == 1600px;
 $fixed-sidebar-width: 328px;
-$docs-body-sidebar-left: 338px;
+$docs-body-sidebar-left: 348px;
 
 /* global */
 
 .body-background {
-    background-color: $primary-background-color;
+    background-color: $body-background-color;
 }
 
 body {
@@ -119,7 +128,6 @@ a:active {
 }
 a:hover {
     color: #ff0000;
-    text-decoration: underline;
 }
 
 /* paragraph links after sections.
@@ -141,7 +149,6 @@ a.headerlink {
 }
 
 a.headerlink:hover {
-    background-color: #00f;
     /*background-color: #990000;*/
     color: white;
 }
@@ -150,7 +157,6 @@ a.headerlink:hover {
 
 #docs-container {
     max-width: $max-container-width;
-    margin: 10px auto;
     position: relative;
     font-size: 120%;
     line-height: 1.4em;
@@ -161,20 +167,43 @@ a.headerlink:hover {
 #docs-header {
     font-family: $primary-font-family;
 
-    font-size: 0.9em;
+    font-size: 0.75em;
     position: relative;
 
     background-color: $topmost-header-color;
     border: $border-style;
-    height: 75px;
+    padding: 10px 20px;
 
     display: flex;
+    flex-wrap: wrap;
+    gap: 10px 20px;
     align-items: center;
 
     h1 {
-        font-size: 20px;
-        color: #222222;
-        margin-left: 10px;
+        &, a {
+            margin: 0;
+            font-size: 1em;
+            color: #222222;
+            font-family: $header-font-family;
+            font-weight: normal;
+            font-weight: bold;
+        }
+    }
+
+    #docs-version-header {
+        order: 2;
+        margin-left: auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+
+        gap: 4px;
+
+        @media (min-width: $large-min-screen-width) {
+            div:last-child {
+                border-left: 1px solid inherit;
+            }
+        }
     }
 }
 
@@ -183,37 +212,44 @@ a.headerlink:hover {
 #index-nav,
 #narrow-index-nav {
     font-family: $sidebar-font-family;
+    font-size: 0.8em;
+}
+
+#index-nav,
+.docs-bottom-navigation--nextprev,
+#narrow-index-nav {
     background-color: $popout-color;
     border: $border-style;
-    font-size: 0.8em;
 }
 
-#docs-bottom-navigation,
 #index-nav {
     padding: 10px;
 }
 
-#docs-version-header {
-    position: absolute;
-    right: 8px;
-    bottom: 8px;
-}
-
 .docs-navigation-links {
     font-family: $primary-font-family;
 }
 
-#docs-bottom-navigation {
-    margin: 1em 0 1em 0;
-}
-
 #docs-bottom-navigation.withsidebar {
     margin-left: $docs-body-sidebar-left;
 }
 
+.docs-bottom-navigation--nextprev {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
+    margin-bottom: $box-top-margin;
+    font-weight: bold;
+    font-size: 0.9em;
+    border-radius: $box-border-radius;
+}
+
 #docs-copyright {
     font-size: 0.85em;
     padding: 5px 0px;
+    margin-top: $box-top-margin;
+    margin-bottom: $box-top-margin;
 }
 
 #docs-header h1,
@@ -242,6 +278,10 @@ a.headerlink:hover {
     font-weight: bold;
 }
 
+#docs-top-navigation-container {
+    margin-bottom: $box-padding;
+}
+
 /* content container, sidebar */
 
 #docs-body-container {
@@ -261,17 +301,62 @@ a.headerlink:hover {
 
 #docs-body {
     min-height: 700px;
+    &.withsidebar {
+        @media (min-width: $large-min-screen-width) {
+            /* double padding on desktop */
+            padding: 10px var(--bs-gutter-x);
+        }
+
+        @media (min-width: $xl-min-screen-width) {
+            /* *4 padding on xl */
+            padding: 10px calc(var(--bs-gutter-x) * 2);
+        }
+
+        @media (min-width: $xxl-min-screen-width) {
+            /* *4 padding on xl */
+            padding: 40px calc(var(--bs-gutter-x) * 4);
+        }
+    }
+}
+
+
+#docs-copyright,
+.docs-bottom-navigation--nextprev {
+    @media (min-width: $large-min-screen-width) {
+        /* double padding on desktop */
+        margin-left: var(--bs-gutter-x);
+        margin-right: var(--bs-gutter-x);
+    }
+
+    @media (min-width: $xl-min-screen-width) {
+        /* *4 padding on xl */
+
+        margin-left: calc(var(--bs-gutter-x) * 2);
+        margin-right: calc(var(--bs-gutter-x) * 2);
+    }
+
+    @media (min-width: $xxl-min-screen-width) {
+        /* *8 padding on xxl */
+
+        margin-left: calc(var(--bs-gutter-x) * 4);
+        margin-right: calc(var(--bs-gutter-x) * 4);
+    }
 }
 
 #index-nav {
     position: relative;
-    margin-top: 10px;
-    padding: 10px 10px 25px 10px;
-}
+    margin-top: $box-top-margin;
+    padding: 10px var(--bs-gutter-x);
+    margin-left: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-right: calc(-1 * var(--bs-gutter-x) * 0.5);
+ 
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-#index-nav form {
-    padding-top: 10px;
-    float: right;
+    p {
+        margin: auto 0;
+    }
 }
 
 #sidebar-paginate {
@@ -280,28 +365,46 @@ a.headerlink:hover {
     left: 10px;
 }
 
-#sidebar-topnav {
-}
-
 #sidebar-search {
     margin: 10px 0px 10px 0px;
+
+    form, label {
+        width: 100%;
+    }
+
+    input {
+        display: block;
+        width: 100%;
+        height: calc(1.5em + .75rem + 2px);
+        font-size: 0.75rem;
+        font-weight: 400;
+        line-height: 1.5;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: .25rem;
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        box-sizing: border-box;
+    }
 }
 
 #docs-sidebar {
-    top: $sidebar-popout-height + 18px;
+    top: $sidebar-popout-height;
     width: $fixed-sidebar-width;
     bottom: 0;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    margin-top: 5px;
     margin-right: 5px;
     z-index: 3;
+    line-height: 1.2em;
 }
 
-#sidebar-banner {
-    margin: 0px;
-    padding: 0px;
+/* targeting the internal div plays nicely with adblockers */
+#sidebar-banner > div {
+    margin: 0px $box-padding 30px 0;
 }
 
 #sidebar-prerelease,
@@ -318,40 +421,39 @@ a.headerlink:hover {
 
 #sidebar-prerelease,
 #sidebar-legacy {
-    background: #f11;
-    color: #bbb;
+    background: #ae3737;
+    color: #ebe4e4;
 }
 
 #sidebar-beta {
-    background: #ffff80;
-    color: #555;
+    background: #dfdf70;
+    color: #4f4f25;
 }
 
 #sidebar-current {
-    background: #4c4;
-    color: #555;
+    background: #3bc53b;
+    color: #203f24;
 }
 
 #docs-version-header {
     #sidebar-prerelease,
     #sidebar-legacy,
     #sidebar-current {
-        width: 14em;
         font-size: 1em;
+        padding: 3px 4px;
+        border-radius: 2px;
     }
 }
 
 #docs-sidebar-inner {
     padding-left: 10px;
+    padding-right: 10px;
     /*width:212px;*/
 
     font-family: $sidebar-font-family;
 
     font-size: 0.85em;
 
-    border: $border-style;
-    background-color: $sidebar-color;
-
     > ul {
         font-size: 0.85em;
     }
@@ -360,8 +462,13 @@ a.headerlink:hover {
         display: block;
         margin-left: -100px;
         padding-left: 100px;
-        padding-top: 3px;
-        padding-bottom: 3px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+
+        a:not(.paramlink) {
+            /* improve link reachability, with inline block the whole box can be clicked*/
+            display: block;
+        }
     }
 
     li.current > span.link-container {
@@ -371,17 +478,17 @@ a.headerlink:hover {
     h3,
     h4,
     h5 {
-        background-color: $sidebar-header-background-color;
         color: $sidebar-header-color;
         font-family: $sidebar-font-family;
-        font-size: 1.1em;
-        font-weight: normal;
-        margin: 10px 0 0 -15px;
+        font-size: 0.9em;
+        text-transform: uppercase;
+        font-weight: bold;
+        margin: 15px 0 0 -15px;
         padding: 5px 10px 5px 15px;
-        text-shadow: 1px 1px 0 white;
-
+        
         a {
             color: $sidebar-header-color;
+            font-weight: bold;
         }
     }
 
@@ -400,6 +507,11 @@ a.headerlink:hover {
             margin-left: 20px;
         }
     }
+
+    a {
+        color: inherit;
+        display: inline-block;
+    }
 }
 
 #docs-sidebar-popout {
@@ -419,6 +531,15 @@ a.headerlink:hover {
 
     h3 {
         margin: 0 0 10px 0;
+        &, a {
+            color: inherit;
+        }
+    }
+
+    #sidebar-topnav {
+        font-size: 0.75rem;
+        font-weight: bold;
+        text-transform: uppercase;
     }
 }
 
@@ -436,6 +557,8 @@ a.headerlink:hover {
     width: $fixed-sidebar-width;
     top: 0;
     bottom: 0;
+    border-right: 1px solid $sidebar-border-color;
+    padding-right: calc(var(--bs-gutter-x) * .5);
 }
 
 #fixed-sidebar #docs-sidebar {
@@ -452,14 +575,6 @@ a.headerlink:hover {
     position: fixed;
 }
 
-#docs-body {
-    background-color: #ffffff;
-    padding: 1px 10px 10px 10px;
-
-    border: $border-style;
-    margin-top: 10px;
-}
-
 #docs-body.withsidebar {
     margin-left: $docs-body-sidebar-left;
 
@@ -486,7 +601,7 @@ a.headerlink:hover {
     #narrow-index-nav {
         display: block;
         padding: 1rem;
-        margin: 10px 0 10px 0;
+        margin: 20px 0 20px 0;
     }
 
     #docs-body.withsidebar {
@@ -499,28 +614,20 @@ a.headerlink:hover {
     #docs-narrow-top-navigation {
         display: block;
     }
+
     #docs-top-navigation-container h1 {
-        position: absolute;
-        top: 10px;
-        margin: 0;
         padding: 0;
-        left: 8px;
+        margin: 0;
     }
 
-    #docs-header {
-        height: 124px;
-    }
-    #docs-version-header {
-        position: absolute;
-        left: 8px;
-        right: 0;
-        bottom: 8px;
+    #docs-header #docs-version-header {
+        justify-content: flex-start;
+        margin-left: 0;
     }
 }
 
 #docs-narrow-top-navigation {
     border: $border-style;
-    background-color: $sidebar-color;
     font-family: $sidebar-font-family;
     font-size: 0.85rem;
 
@@ -542,6 +649,13 @@ a.headerlink:hover {
     font-family: $header-font-family;
     font-weight: bold;
     /* don't put a clear:both here. use less floats */
+    margin-top: 1.45em;
+    margin-bottom: 1.45em;
+}
+
+#docs-body h1 {
+    margin-top: 0;
+    padding-top: 2em;
 }
 
 #docs-body {
@@ -558,7 +672,6 @@ a.headerlink:hover {
     h2 {
         font-size: 1.6rem;
         border-top: $divider-line-style;
-        padding-top: 20px;
     }
 
     #sqlalchemy-documentation h2 {
@@ -576,6 +689,10 @@ a.headerlink:hover {
     h5 {
         font-size: 1.05rem;
     }
+
+    a {
+        border-bottom: 1px dashed rgba($hyperlink-color, 0.4);
+    }
 }
 
 /* SQL popup, code styles */
@@ -584,13 +701,13 @@ a.headerlink:hover {
     background: none;
 }
 
-#docs-container {
+main.docs #docs-container {
     pre {
         font-size: .85rem;
-        background-color: #f0f0f0;
+        background-color: #F8F9FA;
+        border-radius: $box-border-radius;
         border: $border-style;
-        box-shadow: $box-shadow-style;
-        padding: 10px;
+        padding: var(--bs-gutter-x);
         margin: $box-margin;
         overflow: auto;
         line-height: 1.3em;
@@ -603,6 +720,11 @@ a.headerlink:hover {
         }
     }
 
+    @media only screen and (max-width: ($mobile-max-screen-width + 1)) {
+        pre {
+            font-size: .8rem;
+        }
+    }
     /* python annotation key */
     div.code-annotations-key, div.code-non-annotations-key {
         position:absolute;
@@ -658,8 +780,8 @@ a.headerlink:hover {
 .show_sql,
 .show_sql_print {
     padding: 5px 10px;
-    margin: 10px -5px 10px -5px;
-    border: 1px dashed;
+    margin: 30px 0 10px 0;
+    border: 1px dashed darken(#fbfbee, 50%);
 }
 .popup_sql,
 .show_sql {
@@ -677,6 +799,21 @@ a.headerlink:hover {
     overflow: auto;
 }
 
+#docs-body.index {
+    margin-left: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-right: calc(-1 * var(--bs-gutter-x) * 0.5);
+    margin-top: $box-top-margin;
+}
+
+#docs-body.index .docutils.leftmost {
+    padding-left: var(--bs-gutter-x);
+    padding-right: var(--bs-gutter-x);
+}
+
+#docs-body:not(.index) .docutils.container {
+    margin: $box-margin;
+}
+
 .section > table.docutils,
 .sliding-table > table.docutils,
 section > table.docutils {
@@ -792,15 +929,11 @@ div {
         .admonition-title,
         .sidebar-title,
         .topic-title {
-            background-color: $box-header-color;
             padding: $box-title-padding;
 
-            margin: 0 -20px 20px -20px;
+            margin: 10px -20px 20px -20px;
 
             font-weight: bold;
-            border-left: $border-style;
-            border-right: $border-style;
-            border-bottom: $border-style;
         }
 
         > p {
@@ -810,9 +943,12 @@ div {
         padding: 0 20px 0 20px;
         background-color: $box-background-color;
         border: $border-style;
-        box-shadow: $box-shadow-style;
 
         margin: $box-margin;
+
+        &:first-child {
+            margin-top: 0;
+        }
     }
 }
 
@@ -831,6 +967,10 @@ div.versionmodified {
     padding: $box-padding;
 
     margin: $box-margin;
+     
+    p {
+        margin: 0;
+    }
 }
 
 div .versionwarning,
@@ -867,7 +1007,7 @@ div.deepalchemy {
     }
     background-image: url("deepalchemy.png");
     background-size: auto 100px;
-    background-position: 6px 9px;
+    background-position: 10px 29px;
     background-repeat: no-repeat;
     background-color: $deepalchemy-background-color;
     clear: right;
@@ -913,7 +1053,6 @@ div.legacy {
 
 div.class-bases, div.class-members {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     padding: 5px 5px;
 
     padding: $box-padding;
@@ -930,7 +1069,6 @@ div.class-members {
 
 div.inherited-member {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     padding: 5px 5px;
     font-size: 0.9em;
     background-color: #eefbfb;
@@ -952,7 +1090,6 @@ dl.method > dt,
 dl.class > dt,
 dl.exception > dt {
     border: $border-style;
-    box-shadow: $box-shadow-style;
     background-color: $code-sig-background-color;
     margin: 25px -10px 10px 10px;
     padding: 8px 10px;
@@ -963,7 +1100,6 @@ dl.field-list {
     border-left: $border-style;
     border-right: $border-style;
     border-bottom: $border-style;
-    box-shadow: $box-shadow-style;
     margin: $box-top-margin 10px 0 0;
 
     li > p {
@@ -1003,9 +1139,11 @@ span.highlight {
 */
 button.copybtn {
     top: 1em;
-    right: 1.8em;
+    right: 1em;
     width: 2.5em;
     height: 2.5em;
+    display: grid;
+    place-content: center;
 
     svg {
         width: 2em;
@@ -1101,10 +1239,6 @@ div#tutorials {
 
 /* new index layout thing */
 
-#docs-body.index {
-    padding: 0;
-}
-
 div.left-right-container {
     display: flex;
     border-bottom: $divider-line-style;
@@ -1209,7 +1343,6 @@ div#dialect-documentation {
     box-shadow: 0px 0px 2px #ccc;
     padding-top: 1px;
     padding-bottom: 1px;
-    border-radius: 10px;
 
     h2 {
         border-top: none;
@@ -1226,45 +1359,72 @@ div#dialect-documentation {
         }
     }
 
-    div.orm-header, section.orm-header {
-        @include card-line-style();
-        border-left: 2.2em solid $orm-background-color;
+    div.orm-header, section.orm-header,
+    div.core-header, section.core-header {
+        border-right: 0.6em solid $core-background-color;
 
         padding-left: 1em;
         padding-right: 1em;
         margin-bottom: 2em;
 
-        > h2,
-        > h3 {
-            border: none;
-            padding-top: 0;
+        @media (min-width: $large-min-screen-width) {
+            padding-left: 2em;
+            padding-right: 2em;
         }
-    }
-
-    div.core-header, section.core-header {
-        @include card-line-style();
-        border-right: 2.2em solid $core-background-color;
 
-        padding-left: 1em;
-        padding-right: 1em;
-        margin-bottom: 2em;
+        @media (min-width: $xl-min-screen-width) {
+            margin-bottom: 4em;
+        }
 
         > h2,
         > h3 {
             border: none;
+        }
+
+        & > h1:first-child,
+        & > h2:first-child,
+        & > h3:first-child {
             padding-top: 0;
+            margin-top: 1em;
         }
     }
 
+    
+    div.orm-header, section.orm-header {
+        border-left: 0.6em solid $orm-background-color;
+        border-right: none;
+    }
+    
+    
+    div.core-header:not(.orm-header):not(.orm-dependency), section.core-header:not(.orm-header):not(.orm-dependency) {
+        padding-left: 0;
+    }
+    
+    div.orm-header:not(.core-header), section.orm-header:not(.core-header) {
+        padding-right: 0;
+    }
+
     div.orm-dependency, section.orm-dependency {
         border-left: .6em solid $orm-background-color;
     }
 
     div.orm-addin, section.orm-addin {
-        @include card-line-style();
         border-left: .6em solid $orm-background-color;
 
-        padding-left: 10px;
         margin: 10px 0 10px 0;
+
+        padding-left: 1em;
+
+        @media (min-width: $large-min-screen-width) {
+            padding-left: 2em;
+        }
     }
 }
+
+#next-steps > h2 {
+    padding-top: 1.4em;
+}
+
+#footer {
+    background: $body-background-color;
+}
\ No newline at end of file