split choices background cloud in two for better responsiveness

package.json

@@ -14,8 +14,6 @@
     "@astrojs/node": "^7.0.1",
     "@astrojs/react": "^3.0.7",
     "@directus/sdk": "^13.0.2",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
     "@uidotdev/usehooks": "^2.4.1",
     "astro": "^4.0.7",
     "classnames": "^2.3.2",
@@ -25,6 +23,8 @@
     "react-spring-carousel": "^2.0.19"
   },
   "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.56.0",
     "eslint-plugin-astro": "^0.31.0",

src/components/VideoPlayer.tsx

@@ -99,6 +99,7 @@ const VideoPlayer = (props: Props) => {
               src={`/assets/choices/choices_${theme}_${position}.png`}
               height="290"
               width="680"
+              className="choices__image"
               alt={`${props.textContent.screenshotAlt} ${position + 1}`}
             />
           </picture>
@@ -157,6 +158,16 @@ const VideoPlayer = (props: Props) => {
           </li>
         </ul>
       </div>
+      <img
+        src="/assets/backgrounds/bg_cloud_light--left.svg"
+        alt=""
+        className="choices__cloud choices__cloud--left"
+      />
+      <img
+        src="/assets/backgrounds/bg_cloud_light--right.svg"
+        alt=""
+        className="choices__cloud choices__cloud--right"
+      />
     </div>
   );
 };

src/views/Choices/Choices.scss

@@ -21,10 +21,7 @@
 }
 
 .choices__content {
-  background-image: url("/assets/backgrounds/bg_cloud_light.svg");
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  position: relative;
   width: 100%;
   height: fit-content;
   display: flex;
@@ -38,7 +35,7 @@
     max-width: min(80%, 1320px);
   }
 
-  img {
+  .choices__image {
     width: 100%;
     height: 100%;
     object-fit: contain;
@@ -122,24 +119,60 @@
   }
 }
 
+.choices__cloud {
+  position: absolute;
+  width: 100%;
+  object-fit: contain;
+  z-index: -1;
+
+  &--left {
+    top: 10%;
+    right: 820px;
+    height: 66%;
+  }
+
+  &--right {
+    bottom: 5%;
+    left: 660px;
+    height: 95%;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
-  .choices__content {
-    background-image: url("/assets/backgrounds/bg_cloud_dark.svg");
+  .choices__video-button {
+    background: var(--darkmode-blue);
+  }
 
-    .choices__video-button {
-      background: var(--darkmode-blue);
+  .choices__video-position-buttons {
+    button {
+      background: var(--darkmode-pink);
+    }
+  }
+
+  .choices__cloud {
+    &--left {
+      content: url("/assets/backgrounds/bg_cloud_dark--left.svg");
     }
 
-    .choices__video-position-buttons {
-      button {
-        background: var(--darkmode-pink);
-      }
+    &--right {
+      content: url("/assets/backgrounds/bg_cloud_dark--right.svg");
     }
   }
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 1500px) {
+  .choices__cloud {
+    &--left {
+      right: 50%;
+    }
 
+    &--right {
+      left: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: 850px) {
   .choices {
     padding-top: 64px;
   }
@@ -165,4 +198,8 @@
       height: 400px;
     }
   }
+
+  .choices__cloud {
+    display: none;
+  }
 }