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">

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;

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;