luna-one 3.1.597 → 3.1.598

package/dist/luna/components/2x2/2x2.scss

@@ -1,915 +1,915 @@
-@import "../../../global-styles/terra.scss";
-
-//Line trimming function
-@mixin trim($numLines: null) {
-  @if $numLines != null {
-    display: -webkit-box;
-    -webkit-line-clamp: $numLines;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  } @else {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    display: block;
-  }
-}
-
-.luna-2x2 {
-  display: grid;
-  //Grid counts are doubled since this component ...
-  //... places items on half grid lines.
-  grid-template-columns: repeat(28, 1fr); // 14
-  grid-template-rows: repeat(18, 1fr); // 9
-  width: 100%;
-  height: 720px;
-
-  @media screen and (max-width: $breakpoint-xs) {
-    height: fit-content;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: repeat(14, 1fr);
-  }
-
-  &__short-data-point {
-    max-width: 560px;
-    width: 100%;
-    height: 560px;
-
-    @media screen and (max-width: $breakpoint-xs) {
-      height: 960px;
-    }
-  }
-
-  &__data-point {
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-template-rows: auto 1fr;
-      height: min-content;
-    }
-  }
-
-  //One background image and overlapping content have the same ...
-  //... number of grid rows
-  &__one-background-image {
-    grid-template-rows: repeat(22, 1fr); // 11
-    height: 880px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      height: 600px;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      height: fit-content;
-      grid-template-rows: auto 1fr;
-      grid-template-columns: repeat(14, 1fr);
-    }
-
-    &--no-background-image {
-      min-height: 880px;
-
-      @media screen and (min-width: $breakpoint-sm) {
-        height: 840px;
-      }
-    }
-
-    &__background {
-      grid-column: 1 / span 28;
-      grid-row: 1 / span 22;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-column: 1 / span 14;
-        grid-row: 1 / span 52;
-      }
-    }
-  }
-
-  &__four-background-images {
-    //Grid counts are quadrupled since this component ...
-    //... places items on quarter grid lines.
-    grid-template-columns: repeat(56, 1fr); // 14
-    grid-template-rows: repeat(52, 1fr); // 13
-    height: 1000px;
-    overflow: hidden;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      height: 1140px;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      height: fit-content;
-      grid-template-rows: auto 1fr;
-      grid-template-columns: repeat(14, 1fr);
-    }
-
-    &__background1 {
-      grid-column: 1 / span 27;
-      grid-row: 1 / span 22;
-      background-size: cover;
-      background-position: center;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-column: 1 / span 14;
-        grid-row: 1 / span 11;
-      }
-    }
-    &__background2 {
-      grid-column: 30 / span 27;
-      grid-row: 1 / span 22;
-      background-size: cover;
-      background-position: center;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-column: 1 / span 14;
-        grid-row: 16 / span 11;
-      }
-    }
-    &__background3 {
-      grid-column: 1 / span 27;
-      grid-row: 31 / span 22;
-      background-size: cover;
-      background-position: center;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-column: 1 / span 14;
-        grid-row: 46 / span 11;
-      }
-    }
-    &__background4 {
-      grid-column: 30 / span 27;
-      grid-row: 31 / span 22;
-      background-size: cover;
-      background-position: center;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-column: 1 / span 14;
-        grid-row: 31 / span 11;
-      }
-    }
-  }
-
-  &__background-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  &__content-quadrant {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    position: relative;
-    overflow: hidden;
-
-    .luna-stat-container {
-      
-      &__stat {
-        font-size: 60px;
-        line-height: 70px;
-        margin-bottom: 8px;
-        @include benton-normal();
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: 40px;
-          line-height: 47px;
-        }
-      }
-
-      &__subheader {
-        font-size: 24px;
-        line-height: 30px;
-        @include benton-very-bold();
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: 22px;
-          line-height: 27px;
-        }
-      }
-
-      &__text {
-        font-size: 18px;
-        line-height: 25px;
-        @include benton-light();
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: 15px;
-          line-height: 23px;
-        }
-      }
-    }
-
-    &--content {
-      padding: spacing("lg");
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-
-      @media screen and (max-width: $breakpoint-md) {
-        overflow: unset;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        padding: spacing("md");
-      }
-
-      @media screen and (max-width: $breakpoint-xs) {
-        padding: spacing("sm");
-      }
-
-      .headline {
-        @include trim(2);
-        font-weight: $very-bold-font-weight;
-        @media screen and (max-width: $breakpoint-sm) {
-          font-size: font-size("md");
-          margin: 4px 0 0 0;
-          line-height: 1.4;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          line-height: 1.2;
-          -webkit-line-clamp: unset !important;
-        }
-
-        &--no-margin {
-          margin: 0;
-        }
-      }
-
-      .ter-icon-text-list__content-wrapper {
-        @media screen and (max-width: 960px) {
-          grid-column: 1 / span 16 !important;
-          align-self: start;
-        }
-      }
-      .ter-icon-text-list__item {
-        @media screen and (max-width: 960px) {
-          margin-bottom: spacing("xxs");
-        }
-      }
-
-      > .ter-header {
-        > .ter-header__container {
-          > .headline {
-            font-size: $card-title-size;
-            line-height: 30px;
-          }
-        }
-      }
-
-      > .richtext-container {
-        padding-left: 20px;
-        padding-right: 20px;
-        > p {
-          font-size: $body-font-size;
-          line-height: 25px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-
-    &--image {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      overflow: hidden;
-    }
-
-    &--has-data-point {
-      padding: spacing("none");
-      align-items: center;
-    }
-
-    &__top-left {
-      &--one-background-image {
-        grid-column: 2 / span 13;
-        grid-row: 4 / span 9;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 12;
-          grid-row: 4 / span 12;
-        }
-      }
-
-      &--four-background-images {
-        grid-column: 3 / span 25;
-        grid-row: 11 / span 15;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 3 / span 25;
-          grid-row: 10 / span 16;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 13;
-          grid-row: 4 / span 11;
-        }
-      }
-
-      &--zero-background-images {
-        &--has-image {
-          &--has-overlap {
-            grid-column: 1 / span 16;
-            grid-row: 1 / span 11;
-            z-index: 1;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--no-overlap {
-            grid-column: 2 / span 13;
-            grid-row: 2 / span 8;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 1 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-        }
-
-        &--no-image {
-          &--has-overlap {
-            grid-column: 1 / span 16;
-            grid-row: 2 / span 9;
-            z-index: 2;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-row: 3 / span 9;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 15;
-              z-index: 2;
-            }
-          }
-          &--no-overlap {
-            grid-column: 1 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 15;
-              z-index: 2;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 1 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 14 / span 13;
-              z-index: 2;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-md) {
-              height: fit-content;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 25;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-
-    &__top-right {
-      &--one-background-image {
-        grid-column: 15 / span 13;
-        grid-row: 4 / span 9;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 12;
-          grid-row: 16 / span 12;
-        }
-      }
-      &--four-background-images {
-        grid-column: 30 / span 25;
-        grid-row: 11 / span 15;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 30 / span 25;
-          grid-row: 10 / span 16;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 13;
-          grid-row: 19 / span 11;
-        }
-      }
-
-      &--zero-background-images {
-        &--has-image {
-          &--has-overlap {
-            grid-column: 13 / span 16;
-            grid-row: 1 / span 11;
-            z-index: 1;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--no-overlap {
-            grid-column: 15 / span 13;
-            grid-row: 2 / span 8;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 15 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 1 / span 13;
-            }
-          }
-        }
-
-        &--no-image {
-          &--has-overlap {
-            grid-column: 13 / span 16;
-            grid-row: 3 / span 9;
-            z-index: 2;
-
-            @media screen and (max-width: $breakpoint-md) {
-              grid-row: 1  / span 10;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 15;
-              z-index: 2;
-            }
-          }
-          &--no-overlap {
-            grid-column: 15 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 15;
-              z-index: 2;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 15 / span 14;
-            grid-row: 1 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 14 / span 13;
-              z-index: 2;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 12 / span 19;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-
-    &__bottom-left {
-      &--one-background-image {
-        grid-column: 2 / span 13;
-        grid-row: 13 / span 9;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 12;
-          grid-row: 40 / span 12;
-        }
-      }
-      &--four-background-images {
-        grid-column: 3 / span 25;
-        grid-row: 28 / span 15;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 3 / span 25;
-          grid-row: 28 / span 16;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 13;
-          grid-row: 49 / span 11;
-        }
-      }
-
-      &--zero-background-images {
-        &--has-image {
-          &--has-overlap {
-            grid-column: 1 / span 16;
-            grid-row: 11 / span 11;
-            z-index: 0;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--no-overlap {
-            grid-column: 2 / span 13;
-            grid-row: 10 / span 8;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 1 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 38 / span 23;
-            }
-          }
-        }
-
-        &--no-image {
-          &--has-overlap {
-            grid-column: 1 / span 16;
-            grid-row: 12 / span 9;
-            z-index: 2;
-
-            @media screen and (max-width: $breakpoint-md) {
-              grid-row: 12 / span 10;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 38 / span 15;
-              z-index: 2;
-            }
-          }
-          &--no-overlap {
-            grid-column: 1 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 38 / span 15;
-              z-index: 2;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 1 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 40 / span 13;
-              z-index: 2;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 42 / span 23;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-
-    &__bottom-right {
-      &--one-background-image {
-        grid-column: 15 / span 13;
-        grid-row: 13 / span 9;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 12;
-          grid-row: 28 / span 12;
-        }
-      }
-
-      &--four-background-images {
-        grid-column: 30 / span 25;
-        grid-row: 28 / span 15;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          grid-column: 30 / span 25;
-          grid-row: 28 / span 16;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          grid-column: 2 / span 13;
-          grid-row: 34 / span 11;
-        }
-      }
-
-      &--zero-background-images {
-        &--has-image {
-          &--has-overlap {
-            grid-column: 13 / span 16;
-            grid-row: 11 / span 11;
-            z-index: 0;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--no-overlap {
-            grid-column: 15 / span 13;
-            grid-row: 10 / span 8;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 15 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 27 / span 13;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 31 / span 13;
-            }
-          }
-        }
-
-        &--no-image {
-          &--has-overlap {
-            grid-column: 13 / span 16;
-            grid-row: 12 / span 8;
-            z-index: 2;
-
-            @media screen and (max-width: $breakpoint-md) {
-              grid-row: 12 / span 9;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 38 / span 15;
-              z-index: 2;
-            }
-          }
-          &--no-overlap {
-            grid-column: 15 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-sm) {
-              grid-row: 8 / -1;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 38 / span 15;
-              z-index: 2;
-            }
-          }
-          &--has-short-data-point {
-            grid-column: 15 / span 14;
-            grid-row: 10 / span 9;
-
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 14;
-              grid-row: 40 / span 13;
-              z-index: 2;
-            }
-          }
-          &--has-data-point {
-            @media screen and (max-width: $breakpoint-xs) {
-              grid-column: 1 / span 13;
-              grid-row: 59 / span 25;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-
-    &--white {
-      background: $white;
-      color: $trimble-dark-gray;
-      &--background-image {
-        background: rgba($white, 0.95);
-      }
-    }
-
-    &--trimble-blue {
-      background: $trimble-blue;
-      color: $white;
-      &--background-image {
-        background: rgba($trimble-blue, 0.95);
-      }
-    }
-
-    &--dark-navy {
-      background: $dark-navy;
-      color: $white;
-
-      &--background-image {
-        background: rgba($dark-navy, 0.95);
-      }
-    }
-
-    &--concrete-gray {
-      background: $concrete-gray;
-      color: $trimble-dark-gray;
-
-      &--background-image {
-        background: rgba($concrete-gray, 0.95);
-      }
-    }
-
-    &--trimble-dark-gray {
-      background: $trimble-dark-gray;
-      color: $white;
-      &--background-image {
-        background: rgba($trimble-dark-gray, 0.95);
-      }
-    }
-    .luna-2x2--lottie-animation,
-    #lottie {
-      height: 100%;
-    }
-  }
-
-  &__content-spacer {
-    @include trim(5);
-    padding-top: spacing("xs");
-    object-fit: cover;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      @include trim(10);
-      padding-top: spacing("xxs");
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      padding-top: spacing("mini");
-      -webkit-line-clamp: unset !important;
-    }
-
-    p {
-      font-size: $subheading-size-mobile;
-      line-height: 25px;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        font-size: 600px;
-        font-size: font-size("micro");
-      }
-    }
-
-    p:last-of-type {
-      padding-top: 0;
-      margin-bottom: 0;
-    }
-  }
-  #lottie {
-    height: 100%;
-  }
-}
-
-.luna-2x2__content-quadrant--dark-navy,
-.luna-2x2__content-quadrant--trimble-blue,
-.luna-2x2__content-quadrant--trimble-dark-gray {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  li,
-  ul,
-  ol,
-  a,
-  i,
-  b {
-    color: $white;
-  }
-
-  p {
-    font-weight: 400 !important;
-  }
-
-  .richtext-container a {
-    font-weight: 400;
-    transition: color 0.2s ease;
-    display: inline-block;
-    position: relative;
-    text-decoration: none !important;
-    line-height: 1.2;
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      border-bottom: 2px solid $trimble-gold;
-      width: 100%;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    &:hover {
-      color: $white !important;
-    }
-
-    &:hover::before {
-      border-bottom: 2px solid $dark-theme-link-list-underscore !important;
-    }
-  }
-}
-
-.luna-2x2__content-quadrant--concrete-gray,
-.luna-2x2__content-quadrant--white {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  li,
-  ul,
-  ol,
-  a,
-  i,
-  b {
-    color: $trimble-dark-gray;
-  }
-
-  p {
-    font-weight: 400 !important;
-  }
-
-  .richtext-container a {
-    font-weight: 400;
-    transition: color 0.2s ease;
-    display: inline-block;
-    position: relative;
-    text-decoration: none !important;
-    line-height: 1.2;
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      border-bottom: 2px solid $trimble-gold;
-      width: 100%;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    &:hover {
-      color: $trimble-dark-gray !important;
-    }
-
-    &:hover::before {
-      border-bottom: 2px solid $trimble-blue;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+//Line trimming function
+@mixin trim($numLines: null) {
+  @if $numLines != null {
+    display: -webkit-box;
+    -webkit-line-clamp: $numLines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  } @else {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+}
+
+.luna-2x2 {
+  display: grid;
+  //Grid counts are doubled since this component ...
+  //... places items on half grid lines.
+  grid-template-columns: repeat(28, 1fr); // 14
+  grid-template-rows: repeat(18, 1fr); // 9
+  width: 100%;
+  height: 720px;
+
+  @media screen and (max-width: $breakpoint-xs) {
+    height: fit-content;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: repeat(14, 1fr);
+  }
+
+  &__short-data-point {
+    max-width: 560px;
+    width: 100%;
+    height: 560px;
+
+    @media screen and (max-width: $breakpoint-xs) {
+      height: 960px;
+    }
+  }
+
+  &__data-point {
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-template-rows: auto 1fr;
+      height: min-content;
+    }
+  }
+
+  //One background image and overlapping content have the same ...
+  //... number of grid rows
+  &__one-background-image {
+    grid-template-rows: repeat(22, 1fr); // 11
+    height: 880px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      height: 600px;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      height: fit-content;
+      grid-template-rows: auto 1fr;
+      grid-template-columns: repeat(14, 1fr);
+    }
+
+    &--no-background-image {
+      min-height: 880px;
+
+      @media screen and (min-width: $breakpoint-sm) {
+        height: 840px;
+      }
+    }
+
+    &__background {
+      grid-column: 1 / span 28;
+      grid-row: 1 / span 22;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-column: 1 / span 14;
+        grid-row: 1 / span 52;
+      }
+    }
+  }
+
+  &__four-background-images {
+    //Grid counts are quadrupled since this component ...
+    //... places items on quarter grid lines.
+    grid-template-columns: repeat(56, 1fr); // 14
+    grid-template-rows: repeat(52, 1fr); // 13
+    height: 1000px;
+    overflow: hidden;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      height: 1140px;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      height: fit-content;
+      grid-template-rows: auto 1fr;
+      grid-template-columns: repeat(14, 1fr);
+    }
+
+    &__background1 {
+      grid-column: 1 / span 27;
+      grid-row: 1 / span 22;
+      background-size: cover;
+      background-position: center;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-column: 1 / span 14;
+        grid-row: 1 / span 11;
+      }
+    }
+    &__background2 {
+      grid-column: 30 / span 27;
+      grid-row: 1 / span 22;
+      background-size: cover;
+      background-position: center;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-column: 1 / span 14;
+        grid-row: 16 / span 11;
+      }
+    }
+    &__background3 {
+      grid-column: 1 / span 27;
+      grid-row: 31 / span 22;
+      background-size: cover;
+      background-position: center;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-column: 1 / span 14;
+        grid-row: 46 / span 11;
+      }
+    }
+    &__background4 {
+      grid-column: 30 / span 27;
+      grid-row: 31 / span 22;
+      background-size: cover;
+      background-position: center;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-column: 1 / span 14;
+        grid-row: 31 / span 11;
+      }
+    }
+  }
+
+  &__background-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &__content-quadrant {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+
+    .luna-stat-container {
+      
+      &__stat {
+        font-size: 60px;
+        line-height: 70px;
+        margin-bottom: 8px;
+        @include benton-normal();
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: 40px;
+          line-height: 47px;
+        }
+      }
+
+      &__subheader {
+        font-size: 24px;
+        line-height: 30px;
+        @include benton-very-bold();
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: 22px;
+          line-height: 27px;
+        }
+      }
+
+      &__text {
+        font-size: 18px;
+        line-height: 25px;
+        @include benton-light();
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: 15px;
+          line-height: 23px;
+        }
+      }
+    }
+
+    &--content {
+      padding: spacing("lg");
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      @media screen and (max-width: $breakpoint-md) {
+        overflow: unset;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        padding: spacing("md");
+      }
+
+      @media screen and (max-width: $breakpoint-xs) {
+        padding: spacing("sm");
+      }
+
+      .headline {
+        @include trim(2);
+        font-weight: $very-bold-font-weight;
+        @media screen and (max-width: $breakpoint-sm) {
+          font-size: font-size("md");
+          margin: 4px 0 0 0;
+          line-height: 1.4;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          line-height: 1.2;
+          -webkit-line-clamp: unset !important;
+        }
+
+        &--no-margin {
+          margin: 0;
+        }
+      }
+
+      .ter-icon-text-list__content-wrapper {
+        @media screen and (max-width: 960px) {
+          grid-column: 1 / span 16 !important;
+          align-self: start;
+        }
+      }
+      .ter-icon-text-list__item {
+        @media screen and (max-width: 960px) {
+          margin-bottom: spacing("xxs");
+        }
+      }
+
+      > .ter-header {
+        > .ter-header__container {
+          > .headline {
+            font-size: $card-title-size;
+            line-height: 30px;
+          }
+        }
+      }
+
+      > .richtext-container {
+        padding-left: 20px;
+        padding-right: 20px;
+        > p {
+          font-size: $body-font-size;
+          line-height: 25px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    &--image {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      overflow: hidden;
+    }
+
+    &--has-data-point {
+      padding: spacing("none");
+      align-items: center;
+    }
+
+    &__top-left {
+      &--one-background-image {
+        grid-column: 2 / span 13;
+        grid-row: 4 / span 9;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 12;
+          grid-row: 4 / span 12;
+        }
+      }
+
+      &--four-background-images {
+        grid-column: 3 / span 25;
+        grid-row: 11 / span 15;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 3 / span 25;
+          grid-row: 10 / span 16;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 13;
+          grid-row: 4 / span 11;
+        }
+      }
+
+      &--zero-background-images {
+        &--has-image {
+          &--has-overlap {
+            grid-column: 1 / span 16;
+            grid-row: 1 / span 11;
+            z-index: 1;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--no-overlap {
+            grid-column: 2 / span 13;
+            grid-row: 2 / span 8;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 1 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+        }
+
+        &--no-image {
+          &--has-overlap {
+            grid-column: 1 / span 16;
+            grid-row: 2 / span 9;
+            z-index: 2;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-row: 3 / span 9;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 15;
+              z-index: 2;
+            }
+          }
+          &--no-overlap {
+            grid-column: 1 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 15;
+              z-index: 2;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 1 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 14 / span 13;
+              z-index: 2;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-md) {
+              height: fit-content;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 25;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+
+    &__top-right {
+      &--one-background-image {
+        grid-column: 15 / span 13;
+        grid-row: 4 / span 9;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 12;
+          grid-row: 16 / span 12;
+        }
+      }
+      &--four-background-images {
+        grid-column: 30 / span 25;
+        grid-row: 11 / span 15;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 30 / span 25;
+          grid-row: 10 / span 16;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 13;
+          grid-row: 19 / span 11;
+        }
+      }
+
+      &--zero-background-images {
+        &--has-image {
+          &--has-overlap {
+            grid-column: 13 / span 16;
+            grid-row: 1 / span 11;
+            z-index: 1;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--no-overlap {
+            grid-column: 15 / span 13;
+            grid-row: 2 / span 8;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 15 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 1 / span 13;
+            }
+          }
+        }
+
+        &--no-image {
+          &--has-overlap {
+            grid-column: 13 / span 16;
+            grid-row: 3 / span 9;
+            z-index: 2;
+
+            @media screen and (max-width: $breakpoint-md) {
+              grid-row: 1  / span 10;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 15;
+              z-index: 2;
+            }
+          }
+          &--no-overlap {
+            grid-column: 15 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 15;
+              z-index: 2;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 15 / span 14;
+            grid-row: 1 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 14 / span 13;
+              z-index: 2;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 12 / span 19;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+
+    &__bottom-left {
+      &--one-background-image {
+        grid-column: 2 / span 13;
+        grid-row: 13 / span 9;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 12;
+          grid-row: 40 / span 12;
+        }
+      }
+      &--four-background-images {
+        grid-column: 3 / span 25;
+        grid-row: 28 / span 15;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 3 / span 25;
+          grid-row: 28 / span 16;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 13;
+          grid-row: 49 / span 11;
+        }
+      }
+
+      &--zero-background-images {
+        &--has-image {
+          &--has-overlap {
+            grid-column: 1 / span 16;
+            grid-row: 11 / span 11;
+            z-index: 0;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--no-overlap {
+            grid-column: 2 / span 13;
+            grid-row: 10 / span 8;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 1 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 38 / span 23;
+            }
+          }
+        }
+
+        &--no-image {
+          &--has-overlap {
+            grid-column: 1 / span 16;
+            grid-row: 12 / span 9;
+            z-index: 2;
+
+            @media screen and (max-width: $breakpoint-md) {
+              grid-row: 12 / span 10;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 38 / span 15;
+              z-index: 2;
+            }
+          }
+          &--no-overlap {
+            grid-column: 1 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 38 / span 15;
+              z-index: 2;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 1 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 40 / span 13;
+              z-index: 2;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 42 / span 23;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+
+    &__bottom-right {
+      &--one-background-image {
+        grid-column: 15 / span 13;
+        grid-row: 13 / span 9;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 12;
+          grid-row: 28 / span 12;
+        }
+      }
+
+      &--four-background-images {
+        grid-column: 30 / span 25;
+        grid-row: 28 / span 15;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          grid-column: 30 / span 25;
+          grid-row: 28 / span 16;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          grid-column: 2 / span 13;
+          grid-row: 34 / span 11;
+        }
+      }
+
+      &--zero-background-images {
+        &--has-image {
+          &--has-overlap {
+            grid-column: 13 / span 16;
+            grid-row: 11 / span 11;
+            z-index: 0;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--no-overlap {
+            grid-column: 15 / span 13;
+            grid-row: 10 / span 8;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 15 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 27 / span 13;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 31 / span 13;
+            }
+          }
+        }
+
+        &--no-image {
+          &--has-overlap {
+            grid-column: 13 / span 16;
+            grid-row: 12 / span 8;
+            z-index: 2;
+
+            @media screen and (max-width: $breakpoint-md) {
+              grid-row: 12 / span 9;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 38 / span 15;
+              z-index: 2;
+            }
+          }
+          &--no-overlap {
+            grid-column: 15 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-sm) {
+              grid-row: 8 / -1;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 38 / span 15;
+              z-index: 2;
+            }
+          }
+          &--has-short-data-point {
+            grid-column: 15 / span 14;
+            grid-row: 10 / span 9;
+
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 14;
+              grid-row: 40 / span 13;
+              z-index: 2;
+            }
+          }
+          &--has-data-point {
+            @media screen and (max-width: $breakpoint-xs) {
+              grid-column: 1 / span 13;
+              grid-row: 59 / span 25;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+
+    &--white {
+      background: $white;
+      color: $trimble-dark-gray;
+      &--background-image {
+        background: rgba($white, 0.95);
+      }
+    }
+
+    &--trimble-blue {
+      background: $trimble-blue;
+      color: $white;
+      &--background-image {
+        background: rgba($trimble-blue, 0.95);
+      }
+    }
+
+    &--dark-navy {
+      background: $dark-navy;
+      color: $white;
+
+      &--background-image {
+        background: rgba($dark-navy, 0.95);
+      }
+    }
+
+    &--concrete-gray {
+      background: $concrete-gray;
+      color: $trimble-dark-gray;
+
+      &--background-image {
+        background: rgba($concrete-gray, 0.95);
+      }
+    }
+
+    &--trimble-dark-gray {
+      background: $trimble-dark-gray;
+      color: $white;
+      &--background-image {
+        background: rgba($trimble-dark-gray, 0.95);
+      }
+    }
+    .luna-2x2--lottie-animation,
+    #lottie {
+      height: 100%;
+    }
+  }
+
+  &__content-spacer {
+    @include trim(5);
+    padding-top: spacing("xs");
+    object-fit: cover;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      @include trim(10);
+      padding-top: spacing("xxs");
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      padding-top: spacing("mini");
+      -webkit-line-clamp: unset !important;
+    }
+
+    p {
+      font-size: $subheading-size-mobile;
+      line-height: 25px;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        font-size: 600px;
+        font-size: font-size("micro");
+      }
+    }
+
+    p:last-of-type {
+      padding-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  #lottie {
+    height: 100%;
+  }
+}
+
+.luna-2x2__content-quadrant--dark-navy,
+.luna-2x2__content-quadrant--trimble-blue,
+.luna-2x2__content-quadrant--trimble-dark-gray {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  li,
+  ul,
+  ol,
+  a,
+  i,
+  b {
+    color: $white;
+  }
+
+  p {
+    font-weight: 400 !important;
+  }
+
+  .richtext-container a {
+    font-weight: 400;
+    transition: color 0.2s ease;
+    display: inline-block;
+    position: relative;
+    text-decoration: none !important;
+    line-height: 1.2;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      border-bottom: 2px solid $trimble-gold;
+      width: 100%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &:hover {
+      color: $white !important;
+    }
+
+    &:hover::before {
+      border-bottom: 2px solid $dark-theme-link-list-underscore !important;
+    }
+  }
+}
+
+.luna-2x2__content-quadrant--concrete-gray,
+.luna-2x2__content-quadrant--white {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  li,
+  ul,
+  ol,
+  a,
+  i,
+  b {
+    color: $trimble-dark-gray;
+  }
+
+  p {
+    font-weight: 400 !important;
+  }
+
+  .richtext-container a {
+    font-weight: 400;
+    transition: color 0.2s ease;
+    display: inline-block;
+    position: relative;
+    text-decoration: none !important;
+    line-height: 1.2;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      border-bottom: 2px solid $trimble-gold;
+      width: 100%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &:hover {
+      color: $trimble-dark-gray !important;
+    }
+
+    &:hover::before {
+      border-bottom: 2px solid $trimble-blue;
+    }
+  }
+}