luna-one 3.1.544 → 3.1.545

package/dist/luna/featurettes/PullQuote/PullQuote.scss

@@ -69,8 +69,16 @@
     justify-content: space-between;
     max-width: 100%;
 
+    @media (max-width: $breakpoint-xs) {
+      flex-direction: column;
+    }
+
     &--right {
       flex-direction: row-reverse;
+
+      @media (max-width: $breakpoint-xs) {
+        flex-direction: column;
+      }
     }
     &__image {
       &--variant1 {
@@ -87,9 +95,17 @@
       &--variant2 {
         &--quarter {
           width: 25%;
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+          }
         }
         &--half {
           width: 50%;
+
+          @media (max-width: $breakpoint-md) {
+            width: 55%;
+          }
         }
       }
     }
@@ -102,9 +118,17 @@
         }
         &--half {
           width: 50%;
+
+          @media (max-width: $breakpoint-md) {
+            width: 55%;
+          }
         }
         &--threeQuarter {
           width: 75%;
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+          }
         }
       }
     }
@@ -134,6 +158,10 @@
     display: -ms-flexbox;
     display: flex;
 
+    @media (max-width: $breakpoint-xs) {
+      display: block;
+    }
+
     padding: 1em;
     border: 2px solid #fbad26;
     position: relative;
@@ -173,6 +201,10 @@
       position: relative;
       z-index: 1;
       padding: 10px;
+
+      @media (max-width: $breakpoint-xs) {
+        padding: 0;
+      }
     }
   }
 
@@ -197,6 +229,9 @@
       margin: auto;
     }
     &__quote-section {
+      &--variant1--quarter {
+        flex-direction: column;
+      }
       &--variant2 {
         &--half {
           flex-direction: column;
@@ -205,7 +240,7 @@
       &__image {
         &--variant1 {
           &--quarter {
-            width: 25%;
+            width: 50%;
           }
           &--right {
             padding: 20px 20px 0 30px;
@@ -233,13 +268,35 @@
       margin: spacing("auto");
     }
     &__quote-text {
-      font-size: $subheading-size;
-      line-height: 30px;
+      font-size: $heading-4-size-mobile;
+      line-height: 35px;
+    }
+
+    .ter-button {
+      text-align: center;
+      margin: auto;
+      white-space: normal;
+      padding: 5px 12px 2px;
+      height: auto !important;
+      line-height: 25px;
+      gap: 10px;
+
+
+
+      @media (max-width: $breakpoint-xs) {
+        font-size: 14px;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        padding: 8px 16px 4px;
+        font-size: 16px;
+      }
     }
   }
 }
 
-@media (max-width: $breakpoint-xs) {
+
+@media (max-width: $breakpoint-xxs) {
   .ter-pullQuote {
     &--top-image {
       height: 200px;
@@ -302,10 +359,17 @@
     }
 
     .ter-button {
-      width: 100%;
       text-align: center;
       margin: auto;
-      display: block;
+      white-space: normal;
+      padding: 5px 12px 2px;
+      height: auto !important;
+      line-height: 25px;
+      gap: 10px;
+
+      @media (max-width: $breakpoint-xs) {
+        font-size: 14px;
+      }
     }
   }
 }
@@ -323,3 +387,9 @@
     }
   }
 }
+
+@media screen and (max-width: $breakpoint-xs) {
+  .default-layout__grid {
+    margin: 0 !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.544",
+  "version": "3.1.545",
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",