Keep height without simple image in Gallery row

src/components/CrossFadeImages.tsx

@@ -1,23 +1,31 @@
 import React from "react";
-import Image from "next/image";
+import Image, { ImageProps } from "next/image";
 import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
+  width: ImageProps["width"];
+  height: ImageProps["height"];
   images: string[];
   presentationTime: number;
   fadeTime: number;
 }
 
-const AnimatedImage = styled(Image)<{ layout: "fill"; $delay: number }>`
+const AnimatedImage = styled(Image)<{ layout: string; $delay: number }>`
   animation-delay: ${(p) => p.$delay}s;
 `;
 
 const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
-  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+
+  .not-first {
+    margin-left: -100%;
+  }
+
   & > div {
-    position: absolute !important;
-    left: 0;
-    top: 0;
+    box-sizing: border-box;
+    width: 100%;
+    flex: none;
 
     img {
       animation-name: ${(p) => p.$animation};
@@ -29,7 +37,7 @@ const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
 `;
 
 const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
-  images, presentationTime, fadeTime,
+  width, height, images, presentationTime, fadeTime,
 }) => {
   const len = images.length;
   const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
@@ -61,14 +69,18 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
       $duration={len * SINGLE_IMAGE_TIME}
     >
       { images.map((image, idx) => (
-        <AnimatedImage
-          key={image}
-          src={image}
-          objectFit="cover"
-          layout="fill"
-          $delay={delays[idx]}
-        />
-      )) }
+        <div className={idx > 0 ? "not-first" : undefined}>
+          <AnimatedImage
+            key={image}
+            src={image}
+            objectFit="cover"
+            width={width}
+            height={height}
+            layout="responsive"
+            $delay={delays[idx]}
+          />
+        </div>
+      ))}
     </Container>
   );
 };

src/views/ActualPage/ActualPageView.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Image from "next/image";
 import styled from "styled-components";
 import breakpoints from "@theme/breakpoints";
 import { Event } from "@models/Event";
@@ -62,10 +61,35 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
           "/img/Varaslahto2020-AinoSuomi-73.jpg",
           "/img/wappusitsit-jani-mannonen-29.jpg",
         ]}
+        width={400}
+        height={400}
+      />
+      <CrossFadeImages
+        presentationTime={5}
+        fadeTime={1}
+        images={[
+          "/img/koydenveto-jani-mannonen-miika-koskela-17.jpg",
+          "/img/koydenveto-jani-mannonen-miika-koskela-28.jpg",
+          "/img/koydenveto-jani-mannonen-miika-koskela-78.jpg",
+          "/img/Varaslahto2020-AinoSuomi-73.jpg",
+          "/img/wappusitsit-jani-mannonen-29.jpg",
+        ]}
+        width={400}
+        height={400}
+      />
+      <CrossFadeImages
+        presentationTime={5}
+        fadeTime={1}
+        images={[
+          "/img/koydenveto-jani-mannonen-miika-koskela-17.jpg",
+          "/img/koydenveto-jani-mannonen-miika-koskela-28.jpg",
+          "/img/koydenveto-jani-mannonen-miika-koskela-78.jpg",
+          "/img/Varaslahto2020-AinoSuomi-73.jpg",
+          "/img/wappusitsit-jani-mannonen-29.jpg",
+        ]}
+        width={400}
+        height={400}
       />
-
-      <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
-      <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
     </Gallery>
 
     <CTASection