From e8ff308c2bbc5bbd82a16bf1b18fe1cd81b1db97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?=
 <59940332+patrycjakalinska@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:52:09 +0200
Subject: [PATCH] docs: Fix placement of Hero on big screens (#2305)

Before:

![image](https://github.com/user-attachments/assets/2cfbec89-ddd2-46b0-ac1f-aadd7a8271d9)

After:
<img width="1227" alt="image"
src="https://github.com/user-attachments/assets/12ac3764-9630-4eea-90c0-7770882d6e1e">
---
 .../Hero/ScreenSequence/styles.module.css     | 20 +++++++++++++++++++
 .../Hero/StartScreen/styles.module.css        | 16 +--------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/docs/src/components/Hero/ScreenSequence/styles.module.css b/docs/src/components/Hero/ScreenSequence/styles.module.css
index 2651a9ebfd..271678ed76 100644
--- a/docs/src/components/Hero/ScreenSequence/styles.module.css
+++ b/docs/src/components/Hero/ScreenSequence/styles.module.css
@@ -8,6 +8,26 @@
   align-items: center;
 }
 
+@media (min-width: 2920px) {
+  .screens {
+    top: 3rem;
+    min-height: 70%;
+  }
+}
+@media (min-width: 3000px) and (min-height: 1500px) {
+  .screens {
+    top: -3vh;
+    min-height: 50%;
+  }
+}
+
+@media (min-width: 3000px) and (min-height: 2000px) {
+  .screens {
+    top: -3vh;
+    min-height: 50%;
+  }
+}
+
 @media (max-width: 2000px) {
   .screens {
     top: 4rem;
diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css
index 6804223a85..b5c1c1e8e0 100644
--- a/docs/src/components/Hero/StartScreen/styles.module.css
+++ b/docs/src/components/Hero/StartScreen/styles.module.css
@@ -25,7 +25,7 @@
   color: var(--swm-blue-light-80);
 }
 
-[data-theme='dark'] .headingLabel :nth-child(2) {
+[data-theme="dark"] .headingLabel :nth-child(2) {
   color: var(--swm-blue-dark-80);
 }
 
@@ -55,20 +55,6 @@
   justify-content: flex-start;
 }
 
-@media (min-width: 2920px) {
-  .hero {
-    flex-direction: row-reverse;
-    margin-bottom: 0;
-    align-items: center;
-  }
-  .subheadingLabel {
-    width: 100%;
-  }
-  .heading {
-    margin: 0;
-  }
-}
-
 @media (max-width: 996px) {
   .hero {
     margin-bottom: 1rem;