new 3d office + pc room image

src/components/page-sections/office.module.css

@@ -1,25 +1,33 @@
 .container {
   display: grid;
   gap: 2rem;
-  justify-content: center;
   place-items: center;
 }
 
-.image {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-}
-
 .panoramaContainer {
   width: 100%;
-  height: 400px;
+  aspect-ratio: 4 / 3;
-  background: #000000;
+  max-height: 75vh;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
 }
 
 .panoramaContainer > div {
   width: 100% !important;
   height: 100% !important;
 }
+
+.pcRoomImage {
+  width: 100%;
+  height: auto;
+  max-width: 60ch;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.map {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  min-height: 400px;
+  max-height: 75vh;
+  border-radius: 8px;
+}
+

src/components/page-sections/office.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useTranslations } from "next-intl"
+import Image from "next/image"
 import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
 
 import * as styles from "./office.module.css"
@@ -14,32 +15,29 @@ const Office = () => {
       <div className={styles.container}>
         <p>{t("text")}</p>
         <p>{t("tip")}</p>
-        <div
+        <div className={styles.panoramaContainer}>
-          style={{
-            width: "100%",
-            height: "500px",
-            background: "#000000",
-            borderRadius: "8px",
-            overflow: "hidden",
-          }}
-        >
           <ReactPhotoSphereViewer
-            src="/3D_office_2024_11_03.jpg"
+            width={"100%"}
-            height="100%"
+            height={"100%"}
-            width="100%"
+            src="/3D_office_2025_08_20.jpg"
             defaultZoomLvl={0}
             navbar={true}
           />
         </div>
-        <div style={{ width: "100%" }}>
+        <Image
-          <iframe
+          src="/pc_room.jpg"
-            width="100%"
+          alt="Picture of PC-room. Shows 6 gaming PC setups"
-            height="500px"
+          className={styles.pcRoomImage}
-            src="https://use.mazemap.com/embed.html#v=1&config=uio&zlevel=3&center=10.712463,59.932424&zoom=17&campusid=797&sharepoitype=poi&sharepoi=1000986035&utm_medium=iframe"
+          width={666}
-            allow="geolocation"
+          height={500}
-            title="Map by MazeMap"
+        />
-          ></iframe>
+        <iframe
-        </div>
+          width={"100%"}
+          className={styles.map}
+          src="https://use.mazemap.com/embed.html#v=1&config=uio&zlevel=3&center=10.712463,59.932424&zoom=17&campusid=797&sharepoitype=poi&sharepoi=1000986035&utm_medium=iframe"
+          allow="geolocation"
+          title="Map by MazeMap"
+        ></iframe>
       </div>
     </section>
   )