Fix archive images

src/components/archives/ArchiveCard.js

 import React from "react";
-import { Card, Button, Image } from "react-bootstrap";
+import { Button, Card } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 
-import styles from "./ArchiveCard.css";
+import styles from "./ArchiveCard.module.css";
 
 
 // display a single archive on a card
 export default function ArchiveCard({ archive }) {
+
   return (
     <Card>
-
       <Card.Body>
         <Card.Title className="h2">{archive.name}</Card.Title>
-          <Card className="card-description">
-              <Card.Body>
-                <img
-                  className={styles.cardImage}
-                  src={archive.thumbnail}
-                />
-                <Card.Title className="h3 pt-3">{archive.short_description}</Card.Title>
-                <Card.Text className="text-justify">{archive.long_description}</Card.Text>
-              </Card.Body>
-          </Card>
-        {/* <Container fluid>
-          <Row>
-
-            </Card>
-          </Row>
-          <Row className="p-2">
+        <Card className="card-description">
+          <Card.Body>
+            <img
+              className={styles.cardImage}
+              alt={`${archive.name} logo`}
+              src={archive.thumbnail}
+            />
+            <Card.Title className="h3 pt-3">
+              {archive.short_description}
+            </Card.Title>
+            <Card.Text className="text-justify">
+              {archive.long_description}
+            </Card.Text>
+          </Card.Body>
+        </Card>
 
-          </Row>
-        </Container> */}
-          <Button
-              className="mt-3"
-              as={NavLink}
-              variant="outline-primary"
-              to={`/archives/${archive.uri}`}
-          >
-              Visit {archive.name} Archives
-          </Button>
+        <Button
+          className="mt-3"
+          as={NavLink}
+          variant="outline-primary"
+          to={`/archives/${archive.uri}`}
+        >
+          Visit {archive.name} Archives
+        </Button>
       </Card.Body>
     </Card>
   );

src/components/archives/Archives.js

 import React, { useContext } from "react";
-import { Container, Row, Col } from "react-bootstrap";
-import ArchiveCard from "./ArchiveCard";
+import { Col, Container, Row } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
+import ArchiveCard from "./ArchiveCard";
 
 export function Archives() {
+
   const { archives } = useContext(GlobalContext);
   if (!archives) return null;
 
-  console.log("archives: ", { archives });
   return (
-    <Container fluid>
+    <Container fluid className="mt-3">
       <Row>
-      {archives.map((archive) => {
-        let key = "archive-" + archive.id;
-        return <Col><ArchiveCard key={key} archive={archive} /></Col>;
-      })}
+        {
+          archives.map(
+            (archive) => (
+              <Col key={"archive-" + archive.id} >
+                <ArchiveCard archive={archive} />
+              </Col>
+            )
+          )
+        }
       </Row>
     </Container>
   );