/* Scoped to: clothing-template-hero */
[data-component-slug="clothing-template-hero"].hero-section, [data-component-slug="clothing-template-hero"] .hero-section { padding: 48px; padding-top: 0px; width: 100%; } [data-component-slug="clothing-template-hero"].hero-container, [data-component-slug="clothing-template-hero"] .hero-container { position: relative; width: 100%; height: 1264px; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } [data-component-slug="clothing-template-hero"].hero-content, [data-component-slug="clothing-template-hero"] .hero-content { max-width: 900px; width: 100%; margin: 240px auto 0; text-align: center; padding: 0 24px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-weight: 900; font-style: italic; font-size: 64px; line-height: 100%; letter-spacing: 0%; color: #010609; margin: 0 auto 24px; max-width: 850px; text-align: center; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-weight: 400; font-size: 20px; line-height: 100%; letter-spacing: 0%; color: #010609; margin-bottom: 40px; } [data-component-slug="clothing-template-hero"].hero-actions, [data-component-slug="clothing-template-hero"] .hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } [data-component-slug="clothing-template-hero"].btn-primary, [data-component-slug="clothing-template-hero"] .btn-primary { width: 182px; height: 64px; padding: 18px 24px; border-radius: 12px; background: #010609; color: #ffffff; font-size: 20px; line-height: 100%; text-decoration: none; display: flex; align-items: center; justify-content: center; } [data-component-slug="clothing-template-hero"].btn-secondary, [data-component-slug="clothing-template-hero"] .btn-secondary { width: 330px; height: 64px; padding: 18px 24px; border-radius: 12px; border: 1px solid #000000; background: transparent; color: #010609; font-size: 20px; line-height: 100%; text-decoration: none; display: flex; align-items: center; justify-content: center; } @media (max-width: 1024px) { [data-component-slug="clothing-template-hero"].hero-container, [data-component-slug="clothing-template-hero"] .hero-container { height: 980px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 48px; } } @media (max-width: 768px) { [data-component-slug="clothing-template-hero"].hero-section, [data-component-slug="clothing-template-hero"] .hero-section { padding: 24px; } [data-component-slug="clothing-template-hero"].hero-container, [data-component-slug="clothing-template-hero"] .hero-container { height: 820px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 36px; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-size: 16px; } } @media (max-width: 1024px) { [data-component-slug="clothing-template-hero"].hero-content, [data-component-slug="clothing-template-hero"] .hero-content { margin-top: 200px; max-width: 760px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 48px; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-size: 18px; margin-bottom: 32px; } [data-component-slug="clothing-template-hero"].btn-primary, [data-component-slug="clothing-template-hero"] .btn-primary, [data-component-slug="clothing-template-hero"].btn-secondary, [data-component-slug="clothing-template-hero"] .btn-secondary { height: 60px; font-size: 18px; } } @media (max-width: 768px) { [data-component-slug="clothing-template-hero"].hero-section, [data-component-slug="clothing-template-hero"] .hero-section { padding: 24px; } [data-component-slug="clothing-template-hero"].hero-container, [data-component-slug="clothing-template-hero"] .hero-container { height: 760px; border-radius: 20px; } [data-component-slug="clothing-template-hero"].hero-content, [data-component-slug="clothing-template-hero"] .hero-content { margin-top: 180px; padding: 0 16px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 36px; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-size: 16px; line-height: 120%; } [data-component-slug="clothing-template-hero"].hero-actions, [data-component-slug="clothing-template-hero"] .hero-actions { gap: 12px; } [data-component-slug="clothing-template-hero"].btn-primary, [data-component-slug="clothing-template-hero"] .btn-primary { width: 100%; max-width: 260px; } [data-component-slug="clothing-template-hero"].btn-secondary, [data-component-slug="clothing-template-hero"] .btn-secondary { width: 100%; max-width: 260px; } } @media (max-width: 480px) { [data-component-slug="clothing-template-hero"].hero-section, [data-component-slug="clothing-template-hero"] .hero-section { padding: 16px; } [data-component-slug="clothing-template-hero"].hero-container, [data-component-slug="clothing-template-hero"] .hero-container { height: 100vh; border-radius: 16px; } [data-component-slug="clothing-template-hero"].hero-content, [data-component-slug="clothing-template-hero"] .hero-content { margin-top: 140px; padding: 0 12px; } [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 28px; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-size: 14px; margin-bottom: 28px; } [data-component-slug="clothing-template-hero"].hero-actions, [data-component-slug="clothing-template-hero"] .hero-actions { flex-direction: column; align-items: center; } [data-component-slug="clothing-template-hero"].btn-primary, [data-component-slug="clothing-template-hero"] .btn-primary, [data-component-slug="clothing-template-hero"].btn-secondary, [data-component-slug="clothing-template-hero"] .btn-secondary { width: 100%; height: 56px; font-size: 14px; } } @media (max-width: 360px) { [data-component-slug="clothing-template-hero"].hero-title, [data-component-slug="clothing-template-hero"] .hero-title { font-size: 24px; } [data-component-slug="clothing-template-hero"].hero-desc, [data-component-slug="clothing-template-hero"] .hero-desc { font-size: 13px; } }