toc and article page layout

src/scss/_article-pages.scss

@@ -1,14 +1,24 @@
+//@format
 .page-node-type-journal-article .main-content__section {
     padding-top: 0;
 }
+//hero bg-image
 .article-title-banner {
     //display:none;
     //border: 1px solid #ccc;
-    .bg-image {
+    height: 500px;
-
+    background-position: center;
-    height: 400px;
+    background-repeat: no-repeat;
-    overflow:hidden;
+    background-size: cover;
+    position: relative;
 }
+//hero text
+.article-info--wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
 }
 .field--name-field-journal-article-abstract .field__label {
     font-size: 2rem;
@@ -28,7 +38,7 @@
         }
     }
     //footnotes
-    a[id^="footnote"] {
+    a[id^='footnote'] {
         border: 1px solid #5d5d5d;
         background: #5d5d5d;
         color: #fff;
@@ -48,7 +58,8 @@ header.article-header {
 .article-header--metadata {
     display: flex;
     justify-content: space-between;
-    .left,.right {
+    .left,
+    .right {
         flex-direction: column;
         align-items: flex-end;
     }
@@ -58,7 +69,6 @@ header.article-header {
     }
 }
 .article-title-banner {
-    position:relative;
 }
 //.article-info--wrapper {
 //position: absolute;
@@ -66,11 +76,6 @@ header.article-header {
 //margin: 8rem;
 //}
 .article-info--wrapper {
-    position: absolute;
-    margin: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
 .article {
     &--contributor {
@@ -87,13 +92,11 @@ header.article-header {
         //font-style: italic;
     }
     &--type {
-
         font-size: 18px;
         //line-height:18px;
         text-transform: uppercase;
     }
     &--date-published {
-
         font-size: 18px;
         text-transform: uppercase;
         //line-height:18px;
@@ -101,14 +104,15 @@ header.article-header {
     }
 }
 
-
 //layout
 
+.article-title-banner {
+    padding: 0;
+}
 .node__main-content {
     grid-area: main;
 }
 .toc-sticky-wrapper {
-        
     height: 100%;
     grid-area: toc;
 }
@@ -119,7 +123,6 @@ header.article-header {
         column-gap: 2rem;
         grid-template-columns: 70% 30%;
         grid-template-rows: auto;
-    grid-template-areas:
+        grid-template-areas: 'main toc';
-    'main toc'
     }
 }

src/scss/_lp-hero.scss

@@ -1,17 +1,17 @@
-
+//@format
 /*==========Landing Page Hero Image===========*/
 
-
 .hero {
-  background: blue;
+    //background: blue;
-  background: url(../img/DS2_2648.jpg);
+    //background: url(../img/DS2_2648.jpg);
-  background-size: cover;
+    //background-size: cover;
-  background-repeat: no-repeat;
+    //background-repeat: no-repeat;
-  background-position: center;
+    //background-position: center;
-  position: relative;
+    //position: relative;
-  height: 250px;
+    //height: 250px;
     display: flex;
+    .header-top__container {
+        padding: 3rem 0 2rem 0;
+    }
     align-items: center;
 }
-
-

src/scss/_toc.scss

@@ -13,6 +13,10 @@ $toc_breakpoint: 768px;
 }
 
 .toc-block--wide {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 100px;
+    margin-top: 2rem;
     .toc--title {
         &[aria-expanded='true'] h2::after {
             //content: "\f146";//square