Use next/image for all <img> tags

src/components/Card.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
@@ -19,12 +20,6 @@ const StyledCard = styled.article`
   margin: 1rem;
   text-align: center;
 
-  img {
-    width: 100%;
-    max-height: 300px;
-    margin-bottom: 1rem;
-  }
-
   p {
     font-size: 1rem;
     text-overflow: ellipsis;
@@ -77,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
   };
   const datetime = new Date(start_time).toLocaleString("fi-FI", options);
   const img = image ? (
-    <img src={image} alt={imageAlt} />
+    <Image src={image} alt={imageAlt} layout="responsive" width={0} height={0} objectFit="scale-down" />
   ) : null;
 
   const button = (