luna-one 3.1.591 → 3.1.592

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

@@ -1,194 +1,194 @@
-@import "../../../global-styles/terra.scss";
-
-.mxp-products-package {
-  display: grid;
-  grid-template-columns: repeat(16, 1fr);
-  padding: 70px calc((100% - 1280px) / 2) 0;
-  background: $concrete-gray-1;
-
-  @media screen and (max-width: 1100px) {
-    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: 1100px) {
-      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: 1100px) {
-        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: 1100px) {
-          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;
-        font-weight: 700 !important;
-      }
-
-      &--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: 1100px) {
-          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: 5px;
-
-      @media screen and (max-width: 1100px) {
-        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;
-        font-weight: 700 !important;
-
-        @media screen and (max-width: 1100px) {
-          margin-top: 34px;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          margin: 27px auto;
-        }
-      }
-
-      &--card-container {
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-        scrollbar-gutter: stable;
-        min-width: 875px;
-        @media screen and (max-width: 1440px) {
-          min-width: auto;
-        }
-
-        @media screen and (max-width: $breakpoint-xs) {
-          flex-direction: column;
-          max-height: unset;
-          overflow-y: none !important;
-        }
-
-        .ter-bounded-card {
-          max-width: 252px;
-          min-width: 200px;
-          @media screen and (max-width: $breakpoint-md) {
-            // adjust sizing on tablet so that 3 cards sit alongside each other
-            max-width: 245px;
-            
-          }
-          @media screen and (max-width: $breakpoint-xs){
-            max-width: 100%;
-            margin: 0px auto 32px auto !important;
-          }
-          &__image {
-            overflow: visible !important;
-          }
-
-          &__body {
-            background-color: $white;
-          }
-        }
-      }
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.mxp-products-package {
+  display: grid;
+  grid-template-columns: repeat(16, 1fr);
+  padding: 70px calc((100% - 1280px) / 2) 0;
+  background: $concrete-gray-1;
+
+  @media screen and (max-width: 1100px) {
+    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: 1100px) {
+      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: 1100px) {
+        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: 1100px) {
+          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;
+        font-weight: 700 !important;
+      }
+
+      &--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: 1100px) {
+          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: 5px;
+
+      @media screen and (max-width: 1100px) {
+        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;
+        font-weight: 700 !important;
+
+        @media screen and (max-width: 1100px) {
+          margin-top: 34px;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          margin: 27px auto;
+        }
+      }
+
+      &--card-container {
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        scrollbar-gutter: stable;
+        min-width: 875px;
+        @media screen and (max-width: 1440px) {
+          min-width: auto;
+        }
+
+        @media screen and (max-width: $breakpoint-xs) {
+          flex-direction: column;
+          max-height: unset;
+          overflow-y: none !important;
+        }
+
+        .ter-bounded-card {
+          max-width: 252px;
+          min-width: 200px;
+          @media screen and (max-width: $breakpoint-md) {
+            // adjust sizing on tablet so that 3 cards sit alongside each other
+            max-width: 245px;
+            
+          }
+          @media screen and (max-width: $breakpoint-xs){
+            max-width: 100%;
+            margin: 0px auto 32px auto !important;
+          }
+          &__image {
+            overflow: visible !important;
+          }
+
+          &__body {
+            background-color: $white;
+          }
+        }
+      }
+    }
+  }
+}