From 4b193541b264a1770786db6c714b2ae0d86182b2 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 13 Feb 2024 15:18:59 +0100
Subject: [PATCH] fix: make images responsive

---
 .../Current/Aside/Puffs/Puff/puff.module.css  |  1 +
 components/Current/Footer/index.tsx           |  1 -
 components/Current/Hero/hero.module.css       | 27 ++++++++-
 components/Current/Hero/index.tsx             | 56 +++++--------------
 .../Breadcrumbs/breadcrumbs.module.css        |  4 ++
 .../Current/Preamble/Breadcrumbs/index.tsx    | 10 +++-
 6 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/components/Current/Aside/Puffs/Puff/puff.module.css b/components/Current/Aside/Puffs/Puff/puff.module.css
index 7c954008c..24d75861d 100644
--- a/components/Current/Aside/Puffs/Puff/puff.module.css
+++ b/components/Current/Aside/Puffs/Puff/puff.module.css
@@ -12,6 +12,7 @@
   height: auto;
   object-fit: contain;
   object-position: center;
+  width: 100%;
 }
 
 .content {
diff --git a/components/Current/Footer/index.tsx b/components/Current/Footer/index.tsx
index 6b633a29a..7e2347659 100644
--- a/components/Current/Footer/index.tsx
+++ b/components/Current/Footer/index.tsx
@@ -14,7 +14,6 @@ export default async function Footer({ lang }: LangParams) {
   })
 
   const footerData = response.data.all_footer.items[0]
-
   return (
     <footer className="global-footer">
       <div className="global-footer__content">
diff --git a/components/Current/Hero/hero.module.css b/components/Current/Hero/hero.module.css
index b31d7d334..a9649444c 100644
--- a/components/Current/Hero/hero.module.css
+++ b/components/Current/Hero/hero.module.css
@@ -1,4 +1,27 @@
+.wrapper {
+  z-index: 0;
+}
+
+.picture {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 400ms ease-in-out 0s;
+  transform: translate(-50%, -50%) !important;
+}
+
 .heroImage {
-  object-fit: cover;
+  object-fit: contain;
   width: 100%;
-}
\ No newline at end of file
+  height: auto;
+  max-height: 600px;
+  min-height: 100px;
+  object-fit: cover;
+  object-position: center;
+  aspect-ratio: 1/1;
+}
+
+@media screen and (min-width: 740px) {
+  .heroImage {
+    aspect-ratio: auto;
+  }
+}
diff --git a/components/Current/Hero/index.tsx b/components/Current/Hero/index.tsx
index 10d06ab8e..4c96541b8 100644
--- a/components/Current/Hero/index.tsx
+++ b/components/Current/Hero/index.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import Image from "@/components/Image"
 
 import styles from "./hero.module.css"
@@ -8,47 +6,19 @@ import type { HeroProps } from "@/types/components/current/hero"
 
 export default function Hero({ images }: HeroProps) {
   return (
-    <div className="hero-content-overlay hero-content-widget">
-      <div className="hero-content-overlay__img-container">
-        <div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
-          <div className="hero" style={{ top: "113px" }}>
-            <div className="hero__img-container">
-              <div id="full-width-slider" className="royalSlider royalSlider--hero rsDefault rsHor rsFade rsWithBullets" data-js="hero-slider" tabIndex={0} aria-label="Carousel. Change slides with keyboard left and right arrows." style={{ touchAction: "pan-y" }}>
-                <div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
-                  <div className="rsContainer">
-                    <div style={{ zIndex: 0 }} className="rsSlide ">
-                      <picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
-                        {images.map(({ node: image }) => (
-                          <Image
-                            alt={image.title}
-                            className={`rsImg-x slider-plchldr ${styles.heroImage}`}
-                            data-aspectratio="1.50"
-                            height={image.dimension.height}
-                            key={image.title}
-                            src={image.url}
-                            width={image.dimension.width}
-                          />
-                        ))}
-                      </picture>
-                    </div>
-                  </div>
-                  <div className="rsArrow rsArrowLeft" style={{ display: "none" }}>
-                    <div className="rsArrowIcn" tabIndex={0} />
-                  </div>
-                  <div className="rsArrow rsArrowRight" style={{ display: "none" }}>
-                    <div className="rsArrowIcn" tabIndex={0} />
-                  </div>
-                </div>
-                <div className="rsNav rsBullets">
-                  <div className="rsNavItem rsBullet rsNavSelected">
-                    <span></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className={styles.wrapper} aria-label="Hero" tabIndex={0}>
+      <picture className={styles.picture}>
+        {images.map(({ node: image }) => (
+          <Image
+            alt={image.title}
+            className={styles.heroImage}
+            height={image.dimension.height}
+            key={image.title}
+            src={image.url}
+            width={image.dimension.width}
+          />
+        ))}
+      </picture>
     </div>
   )
 }
diff --git a/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css b/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
index f42743da9..efac4ac61 100644
--- a/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
+++ b/components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
@@ -3,6 +3,10 @@
   padding-bottom: 8px;
 }
 
+.parent {
+  display: none;
+}
+
 .list {
   align-items: center;
   display: grid;
diff --git a/components/Current/Preamble/Breadcrumbs/index.tsx b/components/Current/Preamble/Breadcrumbs/index.tsx
index 81a982568..5014645a0 100644
--- a/components/Current/Preamble/Breadcrumbs/index.tsx
+++ b/components/Current/Preamble/Breadcrumbs/index.tsx
@@ -9,14 +9,18 @@ export default function Breadcrumbs({ breadcrumbs, parent, title }: BreadcrumbsP
     <nav className={styles.nav}>
       <ul className={styles.list}>
         {parent ? (
-          <li className="breadcrumb-list__parent hidden-medium hidden-large">
+          <li className={styles.parent}>
             <Link href={parent.node.url}>
               {parent.node.breadcrumbs?.title ?? parent.node.title}
             </Link>
           </li>
         ) : null}
-        {breadcrumbs.edges.map(breadcrumb => (
-          <li className={styles.li} itemProp="breadcrumb" key={breadcrumb.node.title}>
+        {breadcrumbs.edges.map((breadcrumb) => (
+          <li
+            className={styles.li}
+            itemProp="breadcrumb"
+            key={breadcrumb.node.title}
+          >
             <Link className={styles.link} href={breadcrumb.node.url}>
               {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
             </Link>