luna-one 3.1.597 → 3.1.599

package/dist/luna/components/ProseLayout/ProseLayout.scss

@@ -1,384 +1,394 @@
-@import "../../../global-styles/terra.scss";
-
-.prose-container {
-  display: flex;
-  flex-direction: column;
-  color: $trimble-dark-gray;
-  font-family: $regular-font-family;
-
-  .inner-padding {
-    padding: 0 80px;
-
-    @media (max-width: $breakpoint-sm) {
-      padding: 0;
-    }
-  }
-
-  .banner-image-container {
-    position: relative;
-    width: 100%;
-    margin-bottom: 40px;
-
-    @media (max-width: $breakpoint-md) {
-      width: 100%;
-      position: relative;
-      left: calc(-50vw + 50%);
-    }
-
-    @media (max-width: $breakpoint-sm) {
-      margin-bottom: 24px;
-    }
-
-    &.low-banner {
-      margin-bottom: 75px;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 50px;
-      }
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      max-height: 330px;
-      overflow: hidden;
-      object-fit: cover;
-      inset: 0 !important;
-    }
-  }
-
-  .article-head {
-    width: 100%;
-    margin-bottom: 75px;
-
-    @media (max-width: $breakpoint-sm) {
-      margin-bottom: 50px;
-    }
-
-    &.high-header {
-      order: -1;
-      margin-bottom: 40px;
-
-      @media (max-width: $breakpoint-md) {
-        width: 100%;
-        position: relative;
-        left: calc(-50vw + 50%);
-      }
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 24px;
-      }
-    }
-
-    .back-to-list {
-      position: relative;
-      margin-bottom: 40px;
-      margin-left: 28px;
-      display: inline-block;
-      text-decoration: none;
-      color: $trimble-dark-gray;
-      font-size: $body-font-size;
-      line-height: 24px;
-      border-bottom: 3px solid $trimble-gold;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 32px;
-      }
-
-      &:before {
-        position: absolute;
-        display: block;
-        content: "";
-        width: 24px;
-        height: 24px;
-        left: -38px;
-        bottom: -1px;
-        background-image: url("../../images/arrow-left-circle.svg");
-        background-repeat: no-repeat;
-        background-size: 100%;
-      }
-    }
-
-    .category {
-      position: relative;
-      margin-bottom: 48px;
-      color: $trimble-blue;
-      font-size: $heading-4-size;
-      line-height: 46px;
-      font-family: $very-bold-font-family;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 40px;
-        font-size: $large-subheading-size;
-        line-height: 32px;
-      }
-
-      &:before {
-        position: absolute;
-        top: 12px;
-        left: -48px;
-        display: block;
-        content: "";
-        width: 20px;
-        height: 20px;
-        background-image: url("../../images/frame-intersection.svg");
-        background-repeat: no-repeat;
-
-        @media (max-width: $breakpoint-sm) {
-          display: none;
-        }
-      }
-    }
-
-    .category-container {
-      display: flex;
-      .category {
-        &:first-child {
-          &:before {
-            position: absolute;
-            top: 12px;
-            left: -48px;
-            display: block;
-            content: "";
-            width: 20px;
-            height: 20px;
-            background-image: url("../../images/frame-intersection.svg");
-            background-repeat: no-repeat;
-
-            @media (max-width: $breakpoint-sm) {
-              display: none;
-            }
-          }
-        }
-
-        &:not(:first-child) {
-          padding-left: 10px;
-          &:before {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .header {
-      margin: 0;
-      font-size: $heading-4-size;
-      line-height: 45px;
-      font-family: $very-bold-font-family;
-
-      @media (max-width: $breakpoint-sm) {
-        font-size: $heading-4-size-mobile;
-        line-height: 32px;
-      }
-    }
-
-    .sub-header {
-      font-family: $light-font-family;
-      margin-top: 16px;
-      font-size: $large-subheading-size;
-      line-height: 34px;
-
-      @media (max-width: $breakpoint-sm) {
-        font-size: $large-subheading-size-mobile;
-        line-height: 26px;
-      }
-    }
-  }
-
-  .body {
-    .date {
-      margin-bottom: 26px;
-      font-family: $bold-font-family;
-      font-size: $eyebrow-font-size;
-      line-height: 18px;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 16px;
-      }
-    }
-
-    .content {
-      margin-bottom: 64px;
-      font-family: $light-font-family;
-      font-size: $body-font-size;
-      line-height: 28px;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 32px;
-        font-size: $body-font-size-mobile;
-        line-height: 23px;
-      }
-
-      .richtext-container > *,
-      & > *:not(.richtext-container) {
-        &:not(:last-child) {
-          margin-bottom: 28px;
-
-          @media (max-width: $breakpoint-sm) {
-            margin-bottom: 16px;
-          }
-        }
-      }
-
-      .richtext-container,
-      & {
-        & > ul,
-        & > ol,
-        & > img,
-        & > picture {
-          margin-top: 60px;
-        }
-
-        & > img {
-          margin-top: 32px;
-        }
-
-        & > ul,
-        & > ol,
-        & > img,
-        & > picture {
-          margin-bottom: 60px !important;
-
-          @media (max-width: $breakpoint-sm) {
-            margin-top: 0;
-          }
-
-          &:first-child {
-            margin-top: 0;
-          }
-
-          &:last-child {
-            margin-bottom: 0 !important;
-          }
-        }
-      }
-
-      .richtext-container > p > a,
-      & > p > a {
-        font-weight: bold;
-        text-decoration: none;
-        font-family: $medium-font-family;
-        color: $trimble-dark-gray;
-        border-bottom: 3px solid $trimble-gold;
-      }
-
-      .richtext-container > p > img,
-      .richtext-container > p > picture,
-      & > p > img,
-      & > p > picture {
-        margin-top: 60px;
-
-        @media (max-width: $breakpoint-sm) {
-          margin-top: 16px;
-        }
-      }
-
-      .richtext-container > img,
-      .richtext-container > picture,
-      .richtext-container > p > img,
-      .richtext-container > p > picture,
-      & > img,
-      & > picture,
-      & > p > img,
-      & > p > picture {
-        width: calc(100% + 80px);
-        margin-left: -40px;
-
-        @media (max-width: $breakpoint-md) {
-          width: 100%;
-          margin-left: 0;
-        }
-      }
-    }
-  }
-
-  .additional-resources {
-    margin-bottom: 32px;
-
-    .section-header {
-      margin-bottom: 32px;
-      text-transform: uppercase;
-      font-family: $very-bold-font-family;
-      font-size: $eyebrow-font-size;
-      line-height: 18px;
-
-      @media (max-width: $breakpoint-sm) {
-        margin-bottom: 24px;
-      }
-    }
-
-    .resource {
-      display: block;
-
-      &:not(:last-child) {
-        margin-bottom: 16px;
-      }
-
-      a {
-        display: inline-block;
-        text-decoration: none;
-        color: $trimble-dark-gray;
-        font-family: $bold-font-family;
-        font-size: $body-font-size;
-        line-height: 24px;
-        border-bottom: 3px solid $trimble-gold;
-      }
-    }
-  }
-
-  .sources {
-    color: $asphalt-gray;
-    font-size: $body-font-size;
-    line-height: 22px;
-
-    .source {
-      &:not(:last-child) {
-        margin-bottom: 16px;
-      }
-
-      .label {
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  .download-icon {
-    display: inline-block;
-    position: relative;
-    top: 15px;
-    left: 12px;
-
-    svg {
-      width: 24px;
-    }
-  }
-  .richtext-container,
-  .content {
-    font-size: $body-font-size;
-    @include benton-regular();
-    p {
-      font-size: $body-font-size;
-    }
-    h1 {
-      font-size: $heading-3-size;
-      @include benton-very-bold();
-    }
-    h2 {
-      font-size: $subheading-size-mobile;
-      @include benton-very-bold();
-    }
-    h3 {
-      font-size: $large-body-font-size;
-      @include benton-very-bold();
-    }
-    h4 {
-      font-size: $large-body-font-size;
-    }
-    h5 {
-      font-size: $body-font-size;
-    }
-    h6 {
-      font-size: $eyebrow-font-size;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.prose-container {
+  display: flex;
+  flex-direction: column;
+  color: $trimble-dark-gray;
+  font-family: $regular-font-family;
+
+  .inner-padding {
+    padding: 0 80px;
+
+    @media (max-width: $breakpoint-sm) {
+      padding: 0;
+    }
+  }
+
+  .banner-image-container {
+    position: relative;
+    width: 100%;
+    margin-bottom: 40px;
+
+    @media (max-width: $breakpoint-md) {
+      width: 100%;
+      position: relative;
+      left: calc(-50vw + 50%);
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      margin-bottom: 24px;
+    }
+
+    &.low-banner {
+      margin-bottom: 75px;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 50px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      max-height: 330px;
+      overflow: hidden;
+      object-fit: cover;
+      inset: 0 !important;
+    }
+  }
+
+  .article-head {
+    width: 100%;
+    margin-bottom: 75px;
+
+    @media (max-width: $breakpoint-sm) {
+      margin-bottom: 50px;
+    }
+
+    &.high-header {
+      order: -1;
+      margin-bottom: 40px;
+
+      @media (max-width: $breakpoint-md) {
+        width: 100%;
+        position: relative;
+        left: calc(-50vw + 50%);
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 24px;
+      }
+    }
+
+    .back-to-list {
+      position: relative;
+      margin-bottom: 40px;
+      margin-left: 28px;
+      display: inline-block;
+      text-decoration: none;
+      color: $trimble-dark-gray;
+      font-size: $body-font-size;
+      line-height: 24px;
+      border-bottom: 3px solid $trimble-gold;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 32px;
+      }
+
+      &:before {
+        position: absolute;
+        display: block;
+        content: "";
+        width: 24px;
+        height: 24px;
+        left: -38px;
+        bottom: -1px;
+        background-image: url("../../images/arrow-left-circle.svg");
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    .category {
+      position: relative;
+      margin-bottom: 48px;
+      color: $trimble-blue;
+      font-size: $heading-4-size;
+      line-height: 46px;
+      font-family: $very-bold-font-family;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 40px;
+        font-size: $large-subheading-size;
+        line-height: 32px;
+      }
+
+      &:before {
+        position: absolute;
+        top: 12px;
+        left: -48px;
+        display: block;
+        content: "";
+        width: 20px;
+        height: 20px;
+        background-image: url("../../images/frame-intersection.svg");
+        background-repeat: no-repeat;
+
+        @media (max-width: $breakpoint-sm) {
+          display: none;
+        }
+      }
+    }
+
+    .category-container {
+      display: flex;
+      .category {
+        &:first-child {
+          &:before {
+            position: absolute;
+            top: 12px;
+            left: -48px;
+            display: block;
+            content: "";
+            width: 20px;
+            height: 20px;
+            background-image: url("../../images/frame-intersection.svg");
+            background-repeat: no-repeat;
+
+            @media (max-width: $breakpoint-sm) {
+              display: none;
+            }
+          }
+        }
+
+        &:not(:first-child) {
+          padding-left: 10px;
+          &:before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .header {
+      margin: 0;
+      font-size: $heading-4-size;
+      line-height: 45px;
+      font-family: $very-bold-font-family;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $heading-4-size-mobile;
+        line-height: 32px;
+      }
+    }
+
+    .sub-header {
+      font-family: $light-font-family;
+      margin-top: 16px;
+      font-size: $large-subheading-size;
+      line-height: 34px;
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: $large-subheading-size-mobile;
+        line-height: 26px;
+      }
+    }
+  }
+
+  .date {
+    margin-top: 32px;
+    font-size: $body-font-size;
+    line-height: 1.5;
+  }
+
+  .body {
+    .date {
+      margin-bottom: 26px;
+      font-family: $bold-font-family;
+      font-size: $eyebrow-font-size;
+      line-height: 18px;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 16px;
+      }
+    }
+
+    .sub-header {
+      margin-bottom: 32px;
+    }
+
+    .content {
+      margin-bottom: 64px;
+      font-family: $light-font-family;
+      font-size: $body-font-size;
+      line-height: 28px;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 32px;
+        font-size: $body-font-size-mobile;
+        line-height: 23px;
+      }
+
+      .richtext-container > *,
+      & > *:not(.richtext-container) {
+        &:not(:last-child) {
+          margin-bottom: 28px;
+
+          @media (max-width: $breakpoint-sm) {
+            margin-bottom: 16px;
+          }
+        }
+      }
+
+      .richtext-container,
+      & {
+        & > ul,
+        & > ol,
+        & > img,
+        & > picture {
+          margin-top: 60px;
+        }
+
+        & > img {
+          margin-top: 32px;
+        }
+
+        & > ul,
+        & > ol,
+        & > img,
+        & > picture {
+          margin-bottom: 60px !important;
+
+          @media (max-width: $breakpoint-sm) {
+            margin-top: 0;
+          }
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          &:last-child {
+            margin-bottom: 0 !important;
+          }
+        }
+      }
+
+      .richtext-container > p > a,
+      & > p > a {
+        font-weight: bold;
+        text-decoration: none;
+        font-family: $medium-font-family;
+        color: $trimble-dark-gray;
+        border-bottom: 3px solid $trimble-gold;
+      }
+
+      .richtext-container > p > img,
+      .richtext-container > p > picture,
+      & > p > img,
+      & > p > picture {
+        margin-top: 60px;
+
+        @media (max-width: $breakpoint-sm) {
+          margin-top: 16px;
+        }
+      }
+
+      .richtext-container > img,
+      .richtext-container > picture,
+      .richtext-container > p > img,
+      .richtext-container > p > picture,
+      & > img,
+      & > picture,
+      & > p > img,
+      & > p > picture {
+        width: calc(100% + 80px);
+        margin-left: -40px;
+
+        @media (max-width: $breakpoint-md) {
+          width: 100%;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .additional-resources {
+    margin-bottom: 32px;
+
+    .section-header {
+      margin-bottom: 32px;
+      text-transform: uppercase;
+      font-family: $very-bold-font-family;
+      font-size: $eyebrow-font-size;
+      line-height: 18px;
+
+      @media (max-width: $breakpoint-sm) {
+        margin-bottom: 24px;
+      }
+    }
+
+    .resource {
+      display: block;
+
+      &:not(:last-child) {
+        margin-bottom: 16px;
+      }
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+        color: $trimble-dark-gray;
+        font-family: $bold-font-family;
+        font-size: $body-font-size;
+        line-height: 24px;
+        border-bottom: 3px solid $trimble-gold;
+      }
+    }
+  }
+
+  .sources {
+    color: $asphalt-gray;
+    font-size: $body-font-size;
+    line-height: 22px;
+
+    .source {
+      &:not(:last-child) {
+        margin-bottom: 16px;
+      }
+
+      .label {
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  .download-icon {
+    display: inline-block;
+    position: relative;
+    top: 15px;
+    left: 12px;
+
+    svg {
+      width: 24px;
+    }
+  }
+  .richtext-container,
+  .content {
+    font-size: $body-font-size;
+    @include benton-regular();
+    p {
+      font-size: $body-font-size;
+    }
+    h1 {
+      font-size: $heading-3-size;
+      @include benton-very-bold();
+    }
+    h2 {
+      font-size: $subheading-size-mobile;
+      @include benton-very-bold();
+    }
+    h3 {
+      font-size: $large-body-font-size;
+      @include benton-very-bold();
+    }
+    h4 {
+      font-size: $large-body-font-size;
+    }
+    h5 {
+      font-size: $body-font-size;
+    }
+    h6 {
+      font-size: $eyebrow-font-size;
+    }
+  }
+}