visual updates, modified sort order, fallback image, consistent card size

src/assets/css/main.scss

@@ -5,6 +5,11 @@
     opacity: .87;
 }
 
+.card-image {
+    aspect-ratio: 5/7;
+    object-fit: cover;
+}
+
 .sticky {
     background-color: hsl(195, 4%, 22%);
     position: sticky;
@@ -13,14 +18,15 @@
 }
 
 .rarity-icon svg {
-  height: .9rem;
-  line-height: .9rem;
+  height: 1rem;
+  line-height: 1rem;
   display: inline-block;
 }
 
 .price-label {
     color: hsl(122, 39%, 49%);
     font-size: 0.825rem;
+    font-weight: 600;
 }
 
 .price-label:nth-of-type(n+2) {

src/components/RarityIcon.astro

@@ -11,6 +11,9 @@ import doubleRare from "/src/svg/rarity/double_rare.svg?raw";
 import promo from "/src/svg/rarity/promo.svg?raw";
 import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
 import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
+import secretrare from "/src/svg/rarity/rare_secret.svg?raw";
+import blackwhiterare from "/src/svg/rarity/black_white_rare.svg?raw";
+import raresecret from "/src/svg/rarity/rare_secret.svg?raw";
 
 const { rarity } = Astro.props;
 
@@ -27,6 +30,9 @@ const rarityMap = {
   "Promo": promo,
   "Special Illustration Rare": specialIllusRare,
   "Ultra Rare": ultrarare,
+  "Secret Rare": secretrare,
+  "Black White Rare": blackwhiterare,
+  "Shiny Holo Rare": raresecret,
 };
 
 const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";