From a4554fbbe3bd9ec72c12770694905f8a9e035c6c Mon Sep 17 00:00:00 2001
From: The Magician <themagician@engineer.com>
Date: Fri, 1 Dec 2023 14:45:04 +0000
Subject: [PATCH] Split card into artwork and title sections

---
 tarotcard.css   | 24 ++++++++++++++++++++++++
 test/index.html | 13 +++++++------
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/tarotcard.css b/tarotcard.css
index 81584a5..eb0f6bc 100644
--- a/tarotcard.css
+++ b/tarotcard.css
@@ -1,3 +1,7 @@
+:root {
+    --tarot-card-title-background-color: rgb(234, 191, 99);
+}
+
 .tarot-card {
     aspect-ratio: 7 / 12;
 
@@ -13,3 +17,23 @@
 .tarot-card__section:nth-child(1) {
     border-top: 0.4rem solid black;
 }
+
+.tarot-card__section--art {
+    height: 90%;
+}
+
+.tarot-card__art {
+    height: 100%;
+    width: 100%;
+
+    object-fit: cover;
+}
+
+.tarot-card__section--title {
+    height: 10%;
+    background: var(--tarot-card-title-background-color);
+}
+
+.tarot-card__title {
+    margin: 0;
+}
diff --git a/test/index.html b/test/index.html
index be0035d..8604197 100644
--- a/test/index.html
+++ b/test/index.html
@@ -25,12 +25,13 @@
 		<div class="center-grid">
 
 			<div id="simple-card" class="tarot-card">
-				<div class="tarot-card__section">Section 1</div>
-				<div class="tarot-card__section">Section 2</div>
-				<div class="tarot-card__section">Section 3</div>
-				<div class="tarot-card__section">Section 4</div>
-				
-				<p>The Simple Card</p>
+				<div class="tarot-card__section tarot-card__section--art">
+					<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image.">
+				</div>
+
+				<div class="tarot-card__section tarot-card__section--title">
+					<p class="tarot-card__title">The Simple Card</p>
+				</div>
 			</div>
 
 		</div>