add tarot card page

components/Image/Image.js

@@ -9,7 +9,7 @@ export default function Image({ src, caption, wide, full }) {
 
     return <a href={ src } target="_blank" className={ classes }>
         <figure className={ styles.figure }>
-            <img src={ src } title={ caption } alt={ caption } loading="lazy" />
+            <img loading="lazy" src={ src } title={ caption } alt={ caption } />
             { caption && <figcaption className={ styles.caption }>{ caption }</figcaption> }
         </figure>
     </a>

components/TarotDeck/TarotDeck.js

@@ -0,0 +1,15 @@
+import styles from './TarotDeck.module.scss'
+
+export default function TarotDeck({ deck: { name, type, deckImage, cardImage } }) {
+    if (deckImage == cardImage) {
+        console.log({ name })
+    }
+    return <div className={ styles.deck }>
+        <h3 className={ styles.name }>{ name }</h3>
+
+        <div className={ styles.images }>
+            { deckImage ? <img className={ styles.image } src={ deckImage } /> : <p>(no deck box)</p> }
+            <img className={ styles.image } src={ cardImage } />
+        </div>
+    </div>
+}

components/TarotDeck/TarotDeck.module.scss

@@ -0,0 +1,39 @@
+@import '@/styles/breakpoints.scss';
+
+.deck {
+    margin: 0 var(--spacing-medium);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-small);
+
+    max-width: var(--width-wide);
+}
+
+.name {
+    margin: 0;
+}
+
+.images {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-small);
+    height: auto;
+
+    @media (min-width: $breakpoint-medium) {
+        flex-direction: row;
+        height: 400px;
+    }
+}
+
+.image {
+    height: 100%;
+    width: auto;
+}
+
+/* .type {
+    font-weight: bold;
+    background: var(--color-foreground);
+    color: var(--color-background);
+    padding: 0 8px;
+} */