Mobile breakpoints on interstitial modal

polaris.shopify.com/src/components/InterstitialModal/InterstitialModal.module.scss

@@ -11,6 +11,15 @@
   z-index: 10000;
   padding: 2rem;
   animation: fadeIn 0.4s ease-in-out;
+  overflow-y: auto;
+
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+  }
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
@@ -146,6 +155,10 @@
   @media (max-width: 768px) {
     padding: 1.5rem;
   }
+
+  @media (max-width: 480px) {
+    padding: 1rem;
+  }
 }
 
 .StarIconContainer {
@@ -159,9 +172,17 @@
   @media (max-width: 768px) {
     width: 180px;
     height: 240px;
-    margin: -1rem auto 5rem;
-    padding-bottom: 3rem;
-    padding-top: 2rem;
+    margin: -1rem auto 4rem;
+    padding-bottom: 2rem;
+    padding-top: 1.5rem;
+  }
+
+  @media (max-width: 480px) {
+    width: 140px;
+    height: 200px;
+    margin: 0 auto 2.5rem;
+    padding-bottom: 1.5rem;
+    padding-top: 1rem;
   }
 }
 
@@ -246,6 +267,11 @@
     width: 180px;
     height: 180px;
   }
+
+  @media (max-width: 480px) {
+    width: 120px;
+    height: 120px;
+  }
 }
 
 // Background star bottom layer sinks down and blurs more (sunsetting)
@@ -307,7 +333,13 @@
   line-height: 1.3;
 
   @media (max-width: 768px) {
-    font-size: var(--font-size-1000);
+    font-size: var(--font-size-900);
+    margin: 0 0 1rem 0;
+  }
+
+  @media (max-width: 480px) {
+    font-size: var(--font-size-800);
+    margin: 0 0 0.75rem 0;
   }
 }
 
@@ -320,6 +352,13 @@
 
   @media (max-width: 768px) {
     font-size: var(--font-size-600);
+    margin: 0 0 2rem 0;
+  }
+
+  @media (max-width: 480px) {
+    font-size: var(--font-size-500);
+    margin: 0 0 1.5rem 0;
+    line-height: 1.5;
   }
 }
 
@@ -328,6 +367,10 @@
   flex-direction: column;
   gap: 1.25rem;
   align-items: center;
+
+  @media (max-width: 480px) {
+    gap: 1rem;
+  }
 }
 
 .PrimaryButton {
@@ -344,6 +387,11 @@
   border: none !important;
   transition: all var(--duration-200) var(--ease-in-out) !important;
 
+  @media (max-width: 480px) {
+    padding: 0.875rem 1.5rem !important;
+    font-size: var(--font-size-500) !important;
+  }
+
   &:hover {
     background: var(--p-color-bg-fill-hover) !important;
     transform: translateY(-1px);
@@ -383,6 +431,11 @@
   opacity: 0.9;
   transition: opacity var(--duration-200) var(--ease-in-out);
 
+  @media (max-width: 480px) {
+    font-size: var(--font-size-300);
+    padding: 0.375rem;
+  }
+
   &:hover {
     opacity: 1;
   }