/* Scoped to: mobile-launch-template-display-that-respects */
[data-component-slug="mobile-launch-template-display-that-respects"].display-section, [data-component-slug="mobile-launch-template-display-that-respects"] .display-section { width: 100%; padding: 120px 0 140px; background: #000000; text-align: center; } [data-component-slug="mobile-launch-template-display-that-respects"].display-title, [data-component-slug="mobile-launch-template-display-that-respects"] .display-title { max-width: 684px; margin: 0 auto 20px; font-size: 64px; font-weight: 500; line-height: 100%; color: #ffffff; } [data-component-slug="mobile-launch-template-display-that-respects"].display-desc, [data-component-slug="mobile-launch-template-display-that-respects"] .display-desc { max-width: 680px; margin: 0 auto 64px; font-size: 24px; font-weight: 400; line-height: 100%; color: #565656; } [data-component-slug="mobile-launch-template-display-that-respects"].display-image, [data-component-slug="mobile-launch-template-display-that-respects"] .display-image { width: 100%; margin: 0 auto 48px; } [data-component-slug="mobile-launch-template-display-that-respects"].display-image img, [data-component-slug="mobile-launch-template-display-that-respects"] .display-image img { width: 100%; height: auto; display: block; } [data-component-slug="mobile-launch-template-display-that-respects"].display-points, [data-component-slug="mobile-launch-template-display-that-respects"] .display-points { width: 100%; max-width: 900px; margin: 0 auto; background: #0a0a0a; border: 1px solid #2b2b2b; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item { flex: 1; height: 96px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; text-align: center; color: #8a8a8a; position: relative; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item img, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item img { width: 36px; height: 36px; margin-bottom: 10px; opacity: 0.6; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item.active, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item.active { background: #ffffff; color: #000000; font-weight: 500; height: 196px; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item.active img, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item.active img { opacity: 1; } @media (max-width: 1024px) { [data-component-slug="mobile-launch-template-display-that-respects"].display-points, [data-component-slug="mobile-launch-template-display-that-respects"] .display-points { flex-direction: column; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item, [data-component-slug="mobile-launch-template-display-that-respects"].point-item.active, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item.active { width: 100%; height: 72px; transform: none; } } @media (max-width: 768px) { [data-component-slug="mobile-launch-template-display-that-respects"].display-title, [data-component-slug="mobile-launch-template-display-that-respects"] .display-title { font-size: 42px; } [data-component-slug="mobile-launch-template-display-that-respects"].display-desc, [data-component-slug="mobile-launch-template-display-that-respects"] .display-desc { font-size: 20px; } } @media (max-width: 768px) { [data-component-slug="mobile-launch-template-display-that-respects"].points-container, [data-component-slug="mobile-launch-template-display-that-respects"] .points-container { display: flex; flex-direction: column; gap: 12px; padding: 12px; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: #0a0a0a; color: #ffffff; } [data-component-slug="mobile-launch-template-display-that-respects"].point-item.active, [data-component-slug="mobile-launch-template-display-that-respects"] .point-item.active { background: #ffffff; color: #000000; border: 1px solid #ffffff; } [data-component-slug="mobile-launch-template-display-that-respects"].point-icon, [data-component-slug="mobile-launch-template-display-that-respects"] .point-icon { width: 32px; height: 32px; flex-shrink: 0; } [data-component-slug="mobile-launch-template-display-that-respects"].point-text, [data-component-slug="mobile-launch-template-display-that-respects"] .point-text { font-size: 14px; line-height: 100%; text-align: left; } [data-component-slug="mobile-launch-template-display-that-respects"].display-points, [data-component-slug="mobile-launch-template-display-that-respects"] .display-points { padding: 20px; width: 95%; } }