/* Critical CSS for detail pages - inlined via in head to avoid FOUC. Mirrors banner-related rules from components.js _injectGlobalStyles(). This file MUST be loaded synchronously in . */ .detail-page .hero-banner-content h1 { letter-spacing: 0 !important; } .detail-page .hero-banner-content { display: block !important; text-align: left !important; padding-top: 550px !important; padding-bottom: 0 !important; padding-left: calc(max(0px, (100% - 1400px) / 2) + 40px) !important; padding-right: calc(max(0px, (100% - 1400px) / 2) + 40px) !important; box-sizing: border-box !important; } .detail-page .hero-banner-content > h1, .detail-page .hero-banner-content > .banner-en, .detail-page .hero-banner-content > p { margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 768px) { .detail-page .hero-banner-content { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; padding: 0 24px 100px !important; } }