fix: make images responsive

components/Current/Aside/Puffs/Puff/puff.module.css

@@ -12,6 +12,7 @@
   height: auto;
   object-fit: contain;
   object-position: center;
+  width: 100%;
 }
 
 .content {

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

components/Current/Hero/hero.module.css

@@ -1,4 +1,27 @@
-.heroImage {
+.wrapper {
-  object-fit: cover;
+  z-index: 0;
-  width: 100%;
+}
+
+.picture {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 400ms ease-in-out 0s;
+  transform: translate(-50%, -50%) !important;
+}
+
+.heroImage {
+  object-fit: contain;
+  width: 100%;
+  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;
+  }
 }

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={styles.wrapper} aria-label="Hero" tabIndex={0}>
-      <div className="hero-content-overlay__img-container">
+      <picture className={styles.picture}>
-        <div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
+        {images.map(({ node: image }) => (
-          <div className="hero" style={{ top: "113px" }}>
+          <Image
-            <div className="hero__img-container">
+            alt={image.title}
-              <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" }}>
+            className={styles.heroImage}
-                <div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
+            height={image.dimension.height}
-                  <div className="rsContainer">
+            key={image.title}
-                    <div style={{ zIndex: 0 }} className="rsSlide ">
+            src={image.url}
-                      <picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
+            width={image.dimension.width}
-                        {images.map(({ node: image }) => (
+          />
-                          <Image
+        ))}
-                            alt={image.title}
+      </picture>
-                            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>
   )
 }

components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css

@@ -3,6 +3,10 @@
   padding-bottom: 8px;
 }
 
+.parent {
+  display: none;
+}
+
 .list {
   align-items: center;
   display: grid;

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 => (
+        {breadcrumbs.edges.map((breadcrumb) => (
-          <li className={styles.li} itemProp="breadcrumb" key={breadcrumb.node.title}>
+          <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>