Fix sizing issues, display test page nicely

tarotcard-flip.css

@@ -1,18 +1,9 @@
-:root {
-    --min-flip-card-height: 80vh;
-}
-
 @keyframes flip-card {
     to {
         transform: rotateY(180deg);
     }
 }
 
-.tarot-card--flip-on-hover,
-.tarot-card--flip-automatically {
-    min-height: var(--min-flip-card-height);
-}
-
 .tarot-card--flip-automatically .tarot-card__content {
     animation: flip-card 800ms 2s forwards;
 }

tarotcard.css

@@ -10,8 +10,9 @@
 .tarot-card {
     aspect-ratio: 7 / 12;
 
-    max-height: 80vh;
     max-width: 80vw;
+    max-height: 80vh;
+    min-height: 80%;
 }
 
 .tarot-card__link {

test/index.html

@@ -20,7 +20,7 @@
 				height: 100vh;
 
 				display: flex;
-				justify-content: space-evenly;
+				gap: 2em;
 				align-items: center;
 			}
 
@@ -38,7 +38,6 @@
 		<div class="center-grid">
 
 			<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
-			<!--
 			<div id="simple-card" class="tarot-card">
 				<div class="tarot-card__content">
 					<div class="tarot-card__section tarot-card__section--art">
@@ -53,9 +52,8 @@
 					</div>
 				</div>
 			</div>
-			-->
 
-			<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
+			<!-- Identical to The Simple Card, but has a link. -->
 			<div id="link-card" class="tarot-card">
 				<a class="tarot-card__link" href="https://themagician.cc">
 					<div class="tarot-card__content">
@@ -74,7 +72,6 @@
 			</div>
 
 			<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
-			<!--
 			<div id="deal-card" class="tarot-card tarot-card--deal">
 				<div class="tarot-card__content">
 					<div class="tarot-card__section tarot-card__section--art">
@@ -89,10 +86,8 @@
 					</div>
 				</div>
 			</div>
-			-->
 
 			<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
-			<!--
 			<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
@@ -115,10 +110,8 @@
 					</div>
 				</div>
 			</div>
-			-->
 
 			<!-- Uses both the "deal" and "flip" animations. -->
-			<!--
 			<div id="deal-flip-card" class="tarot-card tarot-card--deal tarot-card--flip-on-hover">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
@@ -141,10 +134,8 @@
 					</div>
 				</div>
 			</div>
-			-->
 
 			<!-- Uses the "automatic flip" animation. -->
-			<!--
 			<div id="auto-flip-card" class="tarot-card tarot-card--flip-automatically">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
@@ -167,7 +158,6 @@
 					</div>
 				</div>
 			</div>
-			-->
 
 		</div>
 	</body>