luna-one 3.1.430 → 3.1.433

package/dist/luna/featurettes/ProductsPackage/ProductsPackage.scss

@@ -1,188 +1,188 @@
-@import "../../../global-styles/terra.scss";
-
-.mxp-products-package {
-  display: grid;
-  grid-template-columns: repeat(16, 1fr);
-  padding: 98px calc((100% - 1280px) / 2) 0;
-  background: $concrete-gray-1;
-
-  @media screen and (max-width: $breakpoint-sm) {
-    padding-bottom: 64px;
-    padding-top: 0;
-  }
-
-  @media screen and (max-width: $breakpoint-xs) {
-    padding-bottom: 42px;
-    padding-top: 42px;
-  }
-
-  .mxp-products-package-container {
-    grid-column: 2 / span 14;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-template-columns: 1fr;
-      grid-template-rows: 480px 1fr;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-template-columns: 1fr;
-      grid-template-rows: 500px 1fr;
-    }
-
-    @media screen and (max-width: 500px) {
-      grid-template-rows: 550px 1fr;
-    }
-    
-    &__right-section {
-      height: 100%;
-      grid-column: 1 / span 1;
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 1 / span 1;
-        grid-column: 1 / span 1;
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      @media screen and (max-width: $breakpoint-xs) {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr !important;
-      }
-
-      @media screen and (max-width: 500px) {
-        height: fit-content;
-      }
-
-      &--text-area {
-        max-width: 240px;
-        @media screen and (max-width: $breakpoint-sm) {
-          max-width: 358px;
-          align-self: center;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          max-width: 257px;
-          align-self: start;
-          grid-row: 1 / span 1;
-          grid-column: 1 / span 1;
-        }
-      }
-
-      &--eyebrow {
-        font-size: $eyebrow-font-size;
-        line-height: 18px;
-        text-transform: uppercase;
-        color: $trimble-blue;
-        @include benton-bold();
-        margin-bottom: 10px;
-      }
-
-      &--header {
-        font-size: $heading-6-size;
-        @include benton-very-bold();
-        line-height: 30px;
-        margin-bottom: 10px;
-      }
-
-      &--text {
-        font-size: $body-font-size;
-        line-height: 22px;
-        margin-bottom: 32px;
-        @include benton-light();
-      }
-
-      &--image {
-        max-width: 280px !important;
-        display: block;
-        margin-right: 16px;
-        margin-top: 60px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          height: 480px;
-          max-width: 420px !important;
-          grid-column: 2 / span 1;
-          margin: 0 0 0 20px;
-
-        }
-        @media screen and (max-width: $breakpoint-xs) {
-          display: flex;
-          flex-shrink: 1;
-          max-height: 315px;
-          width: auto;
-          grid-column: 1 / span 1;
-          grid-row: 1 / span 1;
-          display: inline-block;
-          align-self: end;
-          justify-self: end;
-        }
-
-        @media screen and (max-width: 500px) {
-          grid-row: 2 / span 1;
-        }
-      }
-    }
-
-    &__left-section {
-      height: 100%;
-      grid-column: 2 / span 3;
-      padding-left: 35px;
-
-
-      @media screen and (max-width: $breakpoint-sm) {
-        grid-row: 2 / span 1;
-        grid-column: 1 / span 1;
-        padding-left: 0;
-      }
-      &--eyebrow {
-        font-size: $eyebrow-font-size;
-        line-height: 18px;
-        text-transform: uppercase;
-        color: $trimble-blue;
-        @include benton-bold();
-        margin-bottom: 20px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          margin-top: 34px;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          margin: 27px auto;
-          // margin: 0 auto;
-
-        }
-      }
-      
-      &--card-container {
-        display: flex;
-        flex-direction: row;
-        scrollbar-gutter: stable;
-        max-height: 500px;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          flex-direction: column;
-          max-height: unset;
-          overflow-y: none !important;
-        }
-
-        .ter-bounded-card {
-          max-width: 235px !important;
-
-          &__body {
-            background-color: $white;
-          }
-
-          @media screen and (max-width: $breakpoint-sm) {
-            margin: 12px 24px 12px 0;
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            max-width: fit-content !important;
-            margin: 20px 0;
-          }
-
-        }
-      }
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.mxp-products-package {
+  display: grid;
+  grid-template-columns: repeat(16, 1fr);
+  padding: 98px calc((100% - 1280px) / 2) 0;
+  background: $concrete-gray-1;
+
+  @media screen and (max-width: $breakpoint-sm) {
+    padding-bottom: 64px;
+    padding-top: 0;
+  }
+
+  @media screen and (max-width: $breakpoint-xs) {
+    padding-bottom: 42px;
+    padding-top: 42px;
+  }
+
+  .mxp-products-package-container {
+    grid-column: 2 / span 14;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-template-columns: 1fr;
+      grid-template-rows: 480px 1fr;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-template-columns: 1fr;
+      grid-template-rows: 500px 1fr;
+    }
+
+    @media screen and (max-width: 500px) {
+      grid-template-rows: 550px 1fr;
+    }
+    
+    &__right-section {
+      height: 100%;
+      grid-column: 1 / span 1;
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 1 / span 1;
+        grid-column: 1 / span 1;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media screen and (max-width: $breakpoint-xs) {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr !important;
+      }
+
+      @media screen and (max-width: 500px) {
+        height: fit-content;
+      }
+
+      &--text-area {
+        max-width: 240px;
+        @media screen and (max-width: $breakpoint-sm) {
+          max-width: 358px;
+          align-self: center;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          max-width: 257px;
+          align-self: start;
+          grid-row: 1 / span 1;
+          grid-column: 1 / span 1;
+        }
+      }
+
+      &--eyebrow {
+        font-size: $eyebrow-font-size;
+        line-height: 18px;
+        text-transform: uppercase;
+        color: $trimble-blue;
+        @include benton-bold();
+        margin-bottom: 10px;
+      }
+
+      &--header {
+        font-size: $heading-6-size;
+        @include benton-very-bold();
+        line-height: 30px;
+        margin-bottom: 10px;
+      }
+
+      &--text {
+        font-size: $body-font-size;
+        line-height: 22px;
+        margin-bottom: 32px;
+        @include benton-light();
+      }
+
+      &--image {
+        max-width: 280px !important;
+        display: block;
+        margin-right: 16px;
+        margin-top: 60px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          height: 480px;
+          max-width: 420px !important;
+          grid-column: 2 / span 1;
+          margin: 0 0 0 20px;
+
+        }
+        @media screen and (max-width: $breakpoint-xs) {
+          display: flex;
+          flex-shrink: 1;
+          max-height: 315px;
+          width: auto;
+          grid-column: 1 / span 1;
+          grid-row: 1 / span 1;
+          display: inline-block;
+          align-self: end;
+          justify-self: end;
+        }
+
+        @media screen and (max-width: 500px) {
+          grid-row: 2 / span 1;
+        }
+      }
+    }
+
+    &__left-section {
+      height: 100%;
+      grid-column: 2 / span 3;
+      padding-left: 35px;
+
+
+      @media screen and (max-width: $breakpoint-sm) {
+        grid-row: 2 / span 1;
+        grid-column: 1 / span 1;
+        padding-left: 0;
+      }
+      &--eyebrow {
+        font-size: $eyebrow-font-size;
+        line-height: 18px;
+        text-transform: uppercase;
+        color: $trimble-blue;
+        @include benton-bold();
+        margin-bottom: 20px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          margin-top: 34px;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          margin: 27px auto;
+          // margin: 0 auto;
+
+        }
+      }
+      
+      &--card-container {
+        display: flex;
+        flex-direction: row;
+        scrollbar-gutter: stable;
+        max-height: 500px;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          flex-direction: column;
+          max-height: unset;
+          overflow-y: none !important;
+        }
+
+        .ter-bounded-card {
+          max-width: 235px !important;
+
+          &__body {
+            background-color: $white;
+          }
+
+          @media screen and (max-width: $breakpoint-sm) {
+            margin: 12px 24px 12px 0;
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            max-width: fit-content !important;
+            margin: 20px 0;
+          }
+
+        }
+      }
+    }
+  }
 }