luna-one 3.1.593 → 3.1.594

package/dist/luna/{heroes → components}/FullBackgroundHero/FullBackgroundHero.scss

@@ -1,722 +1,722 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-full-background-hero {
-  height: auto;
-
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &-variant-1 {
-    display: grid;
-    grid-template-rows: repeat(6, 1fr);
-    grid-template-columns: 1fr;
-    min-height: 100vh;
-
-    @media screen and (min-width: $breakpoint-md) {
-      min-height: calc(100vh - 105px);
-      height: calc(100vh - 105px);
-    }
-
-    @media screen and (max-width: $breakpoint-md) {
-      height: auto;
-      min-height: auto;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      display: flex;
-      flex-direction: column;
-      height: auto;
-    }
-  }
-
-  &-variant-2 {
-    display: grid;
-    grid-template-rows: repeat(10, 1fr);
-    grid-template-columns: 1fr;
-    height: auto;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-template-rows: repeat(11, 1fr);
-      height: auto;
-    }
-
-    @media screen and (max-width: 700px) {
-      display: flex;
-      flex-direction: column;
-      height: auto;
-      position: relative;
-    }
-  }
-
-  &-variant-2-inset {
-    display: grid;
-    grid-template-rows: repeat(10, 1fr);
-    grid-template-columns: 1fr;
-    height: auto;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-template-rows: repeat(11, 1fr);
-      height: auto;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      display: flex;
-      flex-direction: column;
-      height: auto;
-      position: relative;
-    }
-  }
-
-  &-variant-3 {
-    display: grid;
-    grid-template-rows: repeat(7, 1fr);
-    grid-template-columns: 1fr;
-    min-height: 560px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-template-rows: repeat(8, 1fr);
-      min-height: 480px;
-      .default-layout {
-        margin-bottom: 0;
-        &__grid {
-          margin: 0;
-        }
-      }
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      display: flex;
-      flex-direction: column;
-      height: auto;
-      background: $white !important;
-      position: relative;
-    }
-  }
-
-  &--2x2 {
-    min-height: 850px;
-  }
-
-  &__image-wrapper {
-
-    &-variant-1 {
-      grid-row: 1 / span 6;
-      grid-column: 1 / span 1;
-    }
-
-    &-variant-2 {
-      grid-row: 1 / span 10;
-      grid-column: 1 / span 1;
-      display: grid;
-      grid-template-rows: repeat(10, 1fr);
-      grid-template-columns: 1fr;
-      height: 1000px;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 1 / span 11;
-        grid-template-rows: repeat(11, 1fr);
-        height: 1100px;
-      }
-
-      @media screen and (max-width: 700px) {
-        display: flex;
-        flex-direction: column;
-        height: auto;
-      }
-    }
-
-    &-variant-2-inset {
-      grid-row: 1 / span 10;
-      grid-column: 1 / span 1;
-      display: grid;
-      grid-template-rows: repeat(10, 1fr);
-      grid-template-columns: 1fr;
-      height: 1000px;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 1 / span 11;
-        grid-template-rows: repeat(11, 1fr);
-        height: 1100px;
-      }
-
-      @media screen and (max-width: $breakpoint-xs) {
-        display: flex;
-        flex-direction: column;
-        height: auto;
-      }
-    }
-
-    &-variant-3 {
-      grid-row: 1 / span 8;
-      grid-column: 1 / span 1;
-    }
-
-    &-background {
-      &-variant-1 {
-        height: 100%;
-
-        @media screen and (min-width: $breakpoint-md) {
-          > .ter-focused-image-container {
-            padding-bottom: 0px !important;
-
-            > img {
-              inset: 0 !important;
-            }
-          }
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          height: 280px;
-          overflow: hidden;
-        }
-      }
-
-      @-moz-document url-prefix() {
-          &-variant-2 {
-            @media screen and (min-width: 1650px) {
-              height: auto !important;
-              
-              picture {
-                padding-bottom: 0 !important;
-              }
-            }
-            
-          }  
-        }
-
-      &-variant-2 {
-        height: 100%;
-        grid-row: 1 / span 5;
-        grid-column: 1 / span 1;
-
-        picture {
-          @media screen and (min-width: $breakpoint-lg) {
-            padding-bottom: 0 !important;
-          }
-        }
-
-        @media screen and (max-width: 700px) {
-          height: 280px;
-          overflow: hidden;
-        }
-      }
-
-      &-variant-2-inset {
-        height: 100%;
-        grid-row: 1 / span 5;
-        grid-column: 1 / span 1;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          height: 280px;
-          overflow: hidden;
-        }
-      }
-
-      &-variant-3 {
-        height: 100%;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          min-height: 480px;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          height: 280px;
-          min-height: 280px;
-          overflow: hidden;
-        }
-      }
-      &--lottie {
-        overflow: hidden;
-      }
-    }
-
-    &-content {
-      &-variant-1,
-      &-variant-2-inset,
-      &-variant-3 {
-        display: none;
-      }
-
-      &-variant-2 {
-        height: 100%;
-        grid-row: 6 / span 5;
-        grid-column: 1 / span 1;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-row: 6 / span 6;
-        }
-
-        @media screen and (max-width: 700px) {
-          display: none;
-        }
-      }
-    }
-    .lf-player-container {
-      height: 100%;
-    }
-  }
-
-  &__content-wrapper {
-    width: 100%;
-    padding: 0px calc((100% - 1280px) / 2);
-    z-index: 10;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      padding: 0;
-      .default-layout,
-      .default-layout__grid {
-        margin: 0;
-        padding-top: 0;
-      }
-    }
-
-    &-variant-1 {
-      grid-row: 2 / span 4;
-      grid-column: 1 / span 1;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        margin: 30px 0px;
-      }
-    }
-
-    &-variant-2 {
-      grid-row: 5 / span 6;
-      grid-column: 1 / span 1;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 4 / span 8;
-      }
-    }
-
-    &-variant-2-inset {
-      grid-row: 5 / span 6;
-      grid-column: 1 / span 1;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 5 / span 7;
-      }
-    }
-
-    &-variant-3 {
-      grid-row: 2 / span 6;
-      grid-column: 1 / span 1;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        margin: 40px 0px;
-      }
-    }
-
-    &-grid {
-      @include grid-container;
-      grid-template-rows: 5px 1fr;
-      height: 100%;
-      align-items: center;
-
-      &-variant-1 {
-        align-items: center;
-      }
-
-      &-variant-2,
-      &-variant-3 {
-        align-items: flex-start;
-      }
-    }
-
-    &-left {
-
-      &-variant-1 {
-        grid-column: 2 / span 6;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 2 / span 5;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 14;
-        }
-
-        &--full {
-          @media screen and (max-width: $breakpoint-sm) {
-            grid-column: 2 / span 8;
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            grid-column: 2 / span 14;
-          }
-        }
-      }
-
-      &-variant-2 {
-        grid-column: 2 / span 7;
-        margin-top: 150px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 2 / span 8;
-          margin-top: 250px;
-        }
-
-        @media screen and (max-width: 700px) {
-          grid-column: 2 / span 14;
-          margin: 50px 0px;
-        }
-
-        &--image {
-          @media screen and (max-width: 700px) {
-            margin: 160px 0px 50px 0px;
-          }
-        }
-      }
-
-      &-variant-2-inset {
-        grid-column: 2 / span 6;
-        margin-top: 60px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 2 / span 6;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 14;
-          margin: 50px 0px;
-        }
-
-        @media screen and (min-width: $breakpoint-xl) {
-          margin-top: 150px;
-        }
-      }
-
-      &-variant-3 {
-        grid-column: 2 / span 6;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 14;
-
-          > * .cta-container, .cta-container {
-            color: $gray-10 !important;
-
-            > .cta-buttons {
-              > .ter-button--secondary--1 {
-                background-color: $blue-10 !important;
-                border: 2px solid $blue-10 !important;
-                color: $white !important;
-                transition: all .3s ease;
-                line-height: 24px;
-                padding: 12px;
-                justify-content: space-between;
-
-                @media screen and (max-width: $breakpoint-xs) {
-                  padding-left: 40px;
-                }  
-
-                .arrow {
-                  fill: $white;
-                }
-
-                &:hover,
-                &:focus,
-                &:active {
-                  background-color: darken($blue-10, 7%) !important;
-                }
-              }
-
-              > .ter-button--secondary--2 {
-                background-color: transparent;
-                border: 2px solid $blue-10;
-                color: $blue-10;
-                transition: all .3s ease;
-                line-height: 24px;
-                padding: 12px;
-                justify-content: space-between;
-
-                @media screen and (max-width: $breakpoint-xs) {
-                  padding-left: 40px;
-                }        
-
-                .arrow {
-                  fill: $blue-10;
-                }
-
-                &:hover,
-                &:focus,
-                &:active {
-                  background-color: $trimble-blue;
-                  color: $white;
-                }
-
-                &:hover .arrow,
-                &:focus .arrow,
-                &:active .arrow {
-                  fill: $white;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &-right {
-
-      &-variant-1 {
-        grid-column: 9 / span 7;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 8 / span 8;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 14;
-          margin-top: 50px;
-        }
-
-        > .luna-2x2__short-data-point {
-          @media screen and (max-width: $breakpoint-md) {
-            max-width: 480px;
-            height: 480px;
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            max-width: 600px;
-            height: 960px;
-          }
-        }
-
-        > .data-point--variant_2b {
-          @media screen and (max-width: $breakpoint-xs) {
-            width: auto;
-          }
-        }
-      }
-
-      &-variant-2 {
-        grid-column: 10 / span 6;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 11 / span 5;
-        }
-
-        @media screen and (max-width: 850px) {
-          grid-column: 10 / span 5;
-        }
-
-        @media screen and (max-width: 700px) {
-          grid-column: 2 / span 14;
-          grid-row: 1 / span 1;
-        }
-      }
-
-      &-variant-2-inset {
-        grid-column: 9 / span 7;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 9 / span 7;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 14;
-          margin-bottom: 50px;
-        }
-
-        > .luna-2x2__short-data-point {
-          @media screen and (max-width: $breakpoint-md) {
-            max-width: 420px;
-            height: 420px;
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            max-width: 600px;
-            height: 960px;
-          }
-        }
-        & > .default-layout > .default-layout__grid {
-          margin-top: 0;
-          & > .default-layout__children {
-            // fix for 2x2 sizing
-            grid-column: 1/span 16 !important;
-          }
-        }
-      }
-
-      &-variant-3 {
-        grid-column: 10 / span 5;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 10 / span 6;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          position: absolute;
-          top: 0px;
-          right: 35px;
-          height: 280px;
-        }
-      }
-
-      &-figure {
-        width: 480px;
-        height: 480px;
-
-        @media screen and (max-width: $breakpoint-md) {
-          height: 420px;
-          width: 420px;
-        }
-
-        @media screen and (max-width: $breakpoint-sm) {
-          height: 300px;
-          width: 300px;
-        }
-
-        @media screen and (max-width: 700px) {
-          width: 280px;
-          height: 280px;
-          position: relative !important;
-          bottom: 170px !important;
-          left: calc((100% - 280px) / 2);
-        }
-
-        &--square {
-          border: 8px solid;
-          box-sizing: border-box;
-        }
-
-        &--circle {
-          border: 8px solid;
-          box-sizing: border-box;
-          border-radius: 50%;
-
-          > .ter-focused-image-container, .luna-full-background-hero__image {
-            border-radius: 50%;
-          }
-        }
-
-        &--triangle {
-          position: relative;
-          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-          width: 480px;
-          height: 480px;
-
-          & > picture {
-            aspect-ratio: auto !important;
-          }
-
-          @media screen and (max-width: $breakpoint-md) {
-            height: 420px;
-            width: 420px;
-          }
-
-          @media screen and (max-width: $breakpoint-sm) {
-            width: 300px;
-            height: 300px;
-          }
-
-          @media screen and (max-width: 700px) {
-            width: 280px;
-            height: 280px;
-          }
-
-          > .ter-focused-image-container {
-            position: absolute !important;
-            top: 16px;
-            left: 16px;
-            right: 16px;
-            bottom: 8px;
-            padding: 0px !important;
-            height: auto !important;
-            width: auto !important;
-            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-          }
-
-          > .luna-full-background-hero__image {
-            position: absolute !important;
-            top: 20px;
-            left: 16px;
-            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-            width: 448px;
-            height: 448px;
-
-            @media screen and (max-width: $breakpoint-sm) {
-              width: 268px;
-              height: 268px;
-            }
-
-            @media screen and (max-width: 700px) {
-              width: 248px;
-              height: 248px;
-            }
-          }
-        }
-      }
-
-      &--no-content {
-        display: none;
-      }
-    }
-  }
-  &__white-bg {
-    @media screen and (max-width: $breakpoint-sm) {
-      .ter-button--secondary--1 {
-        border-color: $trimble-blue;
-  
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: $trimble-blue !important;
-          color: $white !important;
-          border-color: $trimble-blue !important;
-  
-          .arrow {
-              fill: $white !important;
-          }
-        }
-      }
-      .ter-button--secondary--2 {
-        background-color: $trimble-blue;
-  
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: darken($blue-10, 7%) !important;
-          color: $white !important;
-
-          .arrow {
-              fill: $white !important;
-          }
-        }
-      }
-    }
-  }
-  
-  .cta-container {
-    .header {
-      .eyebrow {
-        margin-bottom: 6px;
-      }
-      .heading {
-        margin-bottom: 12px;
-        line-height: 38px;
-        @media screen and (max-width: $breakpoint-sm){
-          line-height: 32px;
-        }
-      }
-      .subheading {
-        font-family: $regular-font-family;
-        line-height: 25px;
-        p {
-          line-height: 25px;
-        }
-      }
-      &:not(:last-child){
-        margin-bottom: 12px;
-      }
-    }
-  }
-
-  .ter-header {
-    @media only screen and (max-width: $breakpoint-xs) {
-      color: $gray-10 !important;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.luna-full-background-hero {
+  height: auto;
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &-variant-1 {
+    display: grid;
+    grid-template-rows: repeat(6, 1fr);
+    grid-template-columns: 1fr;
+    min-height: 100vh;
+
+    @media screen and (min-width: $breakpoint-md) {
+      min-height: calc(100vh - 105px);
+      height: calc(100vh - 105px);
+    }
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: auto;
+      min-height: auto;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+    }
+  }
+
+  &-variant-2 {
+    display: grid;
+    grid-template-rows: repeat(10, 1fr);
+    grid-template-columns: 1fr;
+    height: auto;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-template-rows: repeat(11, 1fr);
+      height: auto;
+    }
+
+    @media screen and (max-width: 700px) {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      position: relative;
+    }
+  }
+
+  &-variant-2-inset {
+    display: grid;
+    grid-template-rows: repeat(10, 1fr);
+    grid-template-columns: 1fr;
+    height: auto;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-template-rows: repeat(11, 1fr);
+      height: auto;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      position: relative;
+    }
+  }
+
+  &-variant-3 {
+    display: grid;
+    grid-template-rows: repeat(7, 1fr);
+    grid-template-columns: 1fr;
+    min-height: 560px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-template-rows: repeat(8, 1fr);
+      min-height: 480px;
+      .default-layout {
+        margin-bottom: 0;
+        &__grid {
+          margin: 0;
+        }
+      }
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      background: $white !important;
+      position: relative;
+    }
+  }
+
+  &--2x2 {
+    min-height: 850px;
+  }
+
+  &__image-wrapper {
+
+    &-variant-1 {
+      grid-row: 1 / span 6;
+      grid-column: 1 / span 1;
+    }
+
+    &-variant-2 {
+      grid-row: 1 / span 10;
+      grid-column: 1 / span 1;
+      display: grid;
+      grid-template-rows: repeat(10, 1fr);
+      grid-template-columns: 1fr;
+      height: 1000px;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 1 / span 11;
+        grid-template-rows: repeat(11, 1fr);
+        height: 1100px;
+      }
+
+      @media screen and (max-width: 700px) {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+      }
+    }
+
+    &-variant-2-inset {
+      grid-row: 1 / span 10;
+      grid-column: 1 / span 1;
+      display: grid;
+      grid-template-rows: repeat(10, 1fr);
+      grid-template-columns: 1fr;
+      height: 1000px;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 1 / span 11;
+        grid-template-rows: repeat(11, 1fr);
+        height: 1100px;
+      }
+
+      @media screen and (max-width: $breakpoint-xs) {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+      }
+    }
+
+    &-variant-3 {
+      grid-row: 1 / span 8;
+      grid-column: 1 / span 1;
+    }
+
+    &-background {
+      &-variant-1 {
+        height: 100%;
+
+        @media screen and (min-width: $breakpoint-md) {
+          > .ter-focused-image-container {
+            padding-bottom: 0px !important;
+
+            > img {
+              inset: 0 !important;
+            }
+          }
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          height: 280px;
+          overflow: hidden;
+        }
+      }
+
+      @-moz-document url-prefix() {
+          &-variant-2 {
+            @media screen and (min-width: 1650px) {
+              height: auto !important;
+              
+              picture {
+                padding-bottom: 0 !important;
+              }
+            }
+            
+          }  
+        }
+
+      &-variant-2 {
+        height: 100%;
+        grid-row: 1 / span 5;
+        grid-column: 1 / span 1;
+
+        picture {
+          @media screen and (min-width: $breakpoint-lg) {
+            padding-bottom: 0 !important;
+          }
+        }
+
+        @media screen and (max-width: 700px) {
+          height: 280px;
+          overflow: hidden;
+        }
+      }
+
+      &-variant-2-inset {
+        height: 100%;
+        grid-row: 1 / span 5;
+        grid-column: 1 / span 1;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          height: 280px;
+          overflow: hidden;
+        }
+      }
+
+      &-variant-3 {
+        height: 100%;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          min-height: 480px;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          height: 280px;
+          min-height: 280px;
+          overflow: hidden;
+        }
+      }
+      &--lottie {
+        overflow: hidden;
+      }
+    }
+
+    &-content {
+      &-variant-1,
+      &-variant-2-inset,
+      &-variant-3 {
+        display: none;
+      }
+
+      &-variant-2 {
+        height: 100%;
+        grid-row: 6 / span 5;
+        grid-column: 1 / span 1;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-row: 6 / span 6;
+        }
+
+        @media screen and (max-width: 700px) {
+          display: none;
+        }
+      }
+    }
+    .lf-player-container {
+      height: 100%;
+    }
+  }
+
+  &__content-wrapper {
+    width: 100%;
+    padding: 0px calc((100% - 1280px) / 2);
+    z-index: 10;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      padding: 0;
+      .default-layout,
+      .default-layout__grid {
+        margin: 0;
+        padding-top: 0;
+      }
+    }
+
+    &-variant-1 {
+      grid-row: 2 / span 4;
+      grid-column: 1 / span 1;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        margin: 30px 0px;
+      }
+    }
+
+    &-variant-2 {
+      grid-row: 5 / span 6;
+      grid-column: 1 / span 1;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 4 / span 8;
+      }
+    }
+
+    &-variant-2-inset {
+      grid-row: 5 / span 6;
+      grid-column: 1 / span 1;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 5 / span 7;
+      }
+    }
+
+    &-variant-3 {
+      grid-row: 2 / span 6;
+      grid-column: 1 / span 1;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        margin: 40px 0px;
+      }
+    }
+
+    &-grid {
+      @include grid-container;
+      grid-template-rows: 5px 1fr;
+      height: 100%;
+      align-items: center;
+
+      &-variant-1 {
+        align-items: center;
+      }
+
+      &-variant-2,
+      &-variant-3 {
+        align-items: flex-start;
+      }
+    }
+
+    &-left {
+
+      &-variant-1 {
+        grid-column: 2 / span 6;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 2 / span 5;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 14;
+        }
+
+        &--full {
+          @media screen and (max-width: $breakpoint-sm) {
+            grid-column: 2 / span 8;
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            grid-column: 2 / span 14;
+          }
+        }
+      }
+
+      &-variant-2 {
+        grid-column: 2 / span 7;
+        margin-top: 150px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 2 / span 8;
+          margin-top: 250px;
+        }
+
+        @media screen and (max-width: 700px) {
+          grid-column: 2 / span 14;
+          margin: 50px 0px;
+        }
+
+        &--image {
+          @media screen and (max-width: 700px) {
+            margin: 160px 0px 50px 0px;
+          }
+        }
+      }
+
+      &-variant-2-inset {
+        grid-column: 2 / span 6;
+        margin-top: 60px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 2 / span 6;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 14;
+          margin: 50px 0px;
+        }
+
+        @media screen and (min-width: $breakpoint-xl) {
+          margin-top: 150px;
+        }
+      }
+
+      &-variant-3 {
+        grid-column: 2 / span 6;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 14;
+
+          > * .cta-container, .cta-container {
+            color: $gray-10 !important;
+
+            > .cta-buttons {
+              > .ter-button--secondary--1 {
+                background-color: $blue-10 !important;
+                border: 2px solid $blue-10 !important;
+                color: $white !important;
+                transition: all .3s ease;
+                line-height: 24px;
+                padding: 12px;
+                justify-content: space-between;
+
+                @media screen and (max-width: $breakpoint-xs) {
+                  padding-left: 40px;
+                }  
+
+                .arrow {
+                  fill: $white;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                  background-color: darken($blue-10, 7%) !important;
+                }
+              }
+
+              > .ter-button--secondary--2 {
+                background-color: transparent;
+                border: 2px solid $blue-10;
+                color: $blue-10;
+                transition: all .3s ease;
+                line-height: 24px;
+                padding: 12px;
+                justify-content: space-between;
+
+                @media screen and (max-width: $breakpoint-xs) {
+                  padding-left: 40px;
+                }        
+
+                .arrow {
+                  fill: $blue-10;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                  background-color: $trimble-blue;
+                  color: $white;
+                }
+
+                &:hover .arrow,
+                &:focus .arrow,
+                &:active .arrow {
+                  fill: $white;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-right {
+
+      &-variant-1 {
+        grid-column: 9 / span 7;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 8 / span 8;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 14;
+          margin-top: 50px;
+        }
+
+        > .luna-2x2__short-data-point {
+          @media screen and (max-width: $breakpoint-md) {
+            max-width: 480px;
+            height: 480px;
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            max-width: 600px;
+            height: 960px;
+          }
+        }
+
+        > .data-point--variant_2b {
+          @media screen and (max-width: $breakpoint-xs) {
+            width: auto;
+          }
+        }
+      }
+
+      &-variant-2 {
+        grid-column: 10 / span 6;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 11 / span 5;
+        }
+
+        @media screen and (max-width: 850px) {
+          grid-column: 10 / span 5;
+        }
+
+        @media screen and (max-width: 700px) {
+          grid-column: 2 / span 14;
+          grid-row: 1 / span 1;
+        }
+      }
+
+      &-variant-2-inset {
+        grid-column: 9 / span 7;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 9 / span 7;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 14;
+          margin-bottom: 50px;
+        }
+
+        > .luna-2x2__short-data-point {
+          @media screen and (max-width: $breakpoint-md) {
+            max-width: 420px;
+            height: 420px;
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            max-width: 600px;
+            height: 960px;
+          }
+        }
+        & > .default-layout > .default-layout__grid {
+          margin-top: 0;
+          & > .default-layout__children {
+            // fix for 2x2 sizing
+            grid-column: 1/span 16 !important;
+          }
+        }
+      }
+
+      &-variant-3 {
+        grid-column: 10 / span 5;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 10 / span 6;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          position: absolute;
+          top: 0px;
+          right: 35px;
+          height: 280px;
+        }
+      }
+
+      &-figure {
+        width: 480px;
+        height: 480px;
+
+        @media screen and (max-width: $breakpoint-md) {
+          height: 420px;
+          width: 420px;
+        }
+
+        @media screen and (max-width: $breakpoint-sm) {
+          height: 300px;
+          width: 300px;
+        }
+
+        @media screen and (max-width: 700px) {
+          width: 280px;
+          height: 280px;
+          position: relative !important;
+          bottom: 170px !important;
+          left: calc((100% - 280px) / 2);
+        }
+
+        &--square {
+          border: 8px solid;
+          box-sizing: border-box;
+        }
+
+        &--circle {
+          border: 8px solid;
+          box-sizing: border-box;
+          border-radius: 50%;
+
+          > .ter-focused-image-container, .luna-full-background-hero__image {
+            border-radius: 50%;
+          }
+        }
+
+        &--triangle {
+          position: relative;
+          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+          width: 480px;
+          height: 480px;
+
+          & > picture {
+            aspect-ratio: auto !important;
+          }
+
+          @media screen and (max-width: $breakpoint-md) {
+            height: 420px;
+            width: 420px;
+          }
+
+          @media screen and (max-width: $breakpoint-sm) {
+            width: 300px;
+            height: 300px;
+          }
+
+          @media screen and (max-width: 700px) {
+            width: 280px;
+            height: 280px;
+          }
+
+          > .ter-focused-image-container {
+            position: absolute !important;
+            top: 16px;
+            left: 16px;
+            right: 16px;
+            bottom: 8px;
+            padding: 0px !important;
+            height: auto !important;
+            width: auto !important;
+            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+          }
+
+          > .luna-full-background-hero__image {
+            position: absolute !important;
+            top: 20px;
+            left: 16px;
+            clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+            width: 448px;
+            height: 448px;
+
+            @media screen and (max-width: $breakpoint-sm) {
+              width: 268px;
+              height: 268px;
+            }
+
+            @media screen and (max-width: 700px) {
+              width: 248px;
+              height: 248px;
+            }
+          }
+        }
+      }
+
+      &--no-content {
+        display: none;
+      }
+    }
+  }
+  &__white-bg {
+    @media screen and (max-width: $breakpoint-sm) {
+      .ter-button--secondary--1 {
+        border-color: $trimble-blue;
+  
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $trimble-blue !important;
+          color: $white !important;
+          border-color: $trimble-blue !important;
+  
+          .arrow {
+              fill: $white !important;
+          }
+        }
+      }
+      .ter-button--secondary--2 {
+        background-color: $trimble-blue;
+  
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: darken($blue-10, 7%) !important;
+          color: $white !important;
+
+          .arrow {
+              fill: $white !important;
+          }
+        }
+      }
+    }
+  }
+  
+  .cta-container {
+    .header {
+      .eyebrow {
+        margin-bottom: 6px;
+      }
+      .heading {
+        margin-bottom: 12px;
+        line-height: 38px;
+        @media screen and (max-width: $breakpoint-sm){
+          line-height: 32px;
+        }
+      }
+      .subheading {
+        font-family: $regular-font-family;
+        line-height: 25px;
+        p {
+          line-height: 25px;
+        }
+      }
+      &:not(:last-child){
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .ter-header {
+    @media only screen and (max-width: $breakpoint-xs) {
+      color: $gray-10 !important;
+    }
+  }
+}