/* Scoped to: mobile-launch-template-experience-difference */
[data-component-slug="mobile-launch-template-experience-difference"].exp-difference-section, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-section { width: 100%; background: #ffffff; padding: 120px 96px 0px; position: relative; overflow: hidden; } [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-wrapper, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-wrapper { max-width: 1728px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; align-items: flex-start; position: relative; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left { padding-top: 40px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-family: "DM Sans"; font-weight: 500; font-size: 72px; line-height: 122%; color: #000000; max-width: 830px; margin-bottom: 24px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-family: "DM Sans"; font-weight: 400; font-size: 24px; line-height: 100%; color: #898989; max-width: 800px; margin-bottom: 40px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left a, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left a { display: inline-flex; align-items: center; justify-content: center; width: 246px; height: 69px; border-radius: 8px; background: #008cff; font-family: "DM Sans"; font-weight: 700; font-size: 24px; color: #ffffff; text-decoration: none; } [data-component-slug="mobile-launch-template-experience-difference"].exp-right, [data-component-slug="mobile-launch-template-experience-difference"] .exp-right { position: relative; height: 100%; display: flex; justify-content: center; align-items: flex-end; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 372.4683837890625px; object-fit: contain; z-index: 2; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { position: absolute; top: -260px; right: -410px; width: 746.86083984375px; height: 746.86083984375px; z-index: 1; pointer-events: none; } @media (max-width: 1024px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-wrapper, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-wrapper { grid-template-columns: 1fr; gap: 60px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-right, [data-component-slug="mobile-launch-template-experience-difference"] .exp-right { justify-content: center; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { right: -200px; top: -200px; } } @media (max-width: 640px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-section, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-section { padding: 40px 20px 0px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-size: 40px; max-width: 100%; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-size: 20px; max-width: 100%; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 280px; height: auto; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { width: 420px; height: 420px; top: -120px; right: -250px; } } @media (max-width: 1280px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-wrapper, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-wrapper { grid-template-columns: 1.2fr 1fr; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-size: 64px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-size: 22px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 340px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { right: -360px; top: -240px; } } @media (max-width: 1024px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-wrapper, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-wrapper { grid-template-columns: 1fr; gap: 64px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left { padding-top: 0; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-size: 56px; max-width: 100%; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-size: 22px; max-width: 100%; } [data-component-slug="mobile-launch-template-experience-difference"].exp-right, [data-component-slug="mobile-launch-template-experience-difference"] .exp-right { justify-content: center; align-items: flex-end; min-height: 520px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 320px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { width: 560px; height: 560px; right: -220px; top: -200px; } } @media (max-width: 768px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-size: 44px; line-height: 120%; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-size: 20px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left a, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left a { width: 220px; height: 64px; font-size: 22px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-right, [data-component-slug="mobile-launch-template-experience-difference"] .exp-right { min-height: 480px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 280px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { width: 460px; height: 460px; right: -220px; top: -160px; } } @media (max-width: 480px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-section, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-section { padding: 32px 16px 0px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left h2, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left h2 { font-size: 36px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left p, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left p { font-size: 18px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-left a, [data-component-slug="mobile-launch-template-experience-difference"] .exp-left a { width: 200px; height: 60px; font-size: 20px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-right, [data-component-slug="mobile-launch-template-experience-difference"] .exp-right { min-height: 420px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-phone, [data-component-slug="mobile-launch-template-experience-difference"] .exp-phone { width: 240px; } [data-component-slug="mobile-launch-template-experience-difference"].exp-ellipse, [data-component-slug="mobile-launch-template-experience-difference"] .exp-ellipse { width: 380px; height: 380px; right: -200px; top: -140px; } } @media screen and (width: 768px) { [data-component-slug="mobile-launch-template-experience-difference"].exp-difference-section, [data-component-slug="mobile-launch-template-experience-difference"] .exp-difference-section { width: 100%; background: #ffffff; padding: 60px 40px 0px; position: relative; overflow: hidden; } }