Initial work on the new hormone sections

scss/_card.scss

@@ -140,25 +140,25 @@
 
 @include media-breakpoint-up(md) {
 
-  .left {
+  .card.left {
     float: left;
     margin-right: 10px;
   }
 
-  .right {
+  .card.right {
     float: right;
     margin-left: 10px;
     page-break-inside: always;
 
   }
 
-  .center {
+  .card.center {
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1em;
   }
 
-  .natural {
+  .card.natural {
     .card-img-top {
       width: unset;
       max-height: 50vh;

scss/_markup.scss

@@ -88,6 +88,27 @@
         height: 1em;
       }
     }
+
+    + {
+      h1, h2, h3, h4, h5 {
+        .header-link {
+          display: none;
+        }
+      }
+    }
+
+    &:first-child {
+      .header-link {
+        display: none;
+      }
+    }
+  }
+
+  h5 {
+    font-weight: 600;
+    font-family: $font-primary;
+    margin-bottom: 0.2rem;
+    font-size: 1.05em;
   }
 
   li p {

scss/_page.scss

@@ -77,8 +77,6 @@ body.gdb, body.hrt {
     } }
 
     .gutter {
-      // page-break-inside: avoid;
-      // page-break-before: avoid;
 
       @media screen and (min-width: 800px) {
         position: relative;
@@ -106,6 +104,10 @@ body.gdb, body.hrt {
         flex-direction: column;
         align-items: center;
 
+        .tweet {
+          flex: none;
+        }
+
         &.flex-end {
           justify-content: flex-end;
         }

scss/_pager.scss

@@ -30,15 +30,16 @@
     max-width: calc(50vw - 10px);
 
     .caption {
-      overflow-x: hidden;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
-  .btn.left .caption {
+  .btn.left {
     justify-content: flex-start;
   }
 
-  .btn.right .caption {
+  .btn.right {
     justify-content: flex-end;
   }