more card styling changes, moved card and cardgrid to componenets, added placeholder for filters/search

src/assets/css/main.scss

@@ -1,17 +1,19 @@
 @import '_bootstrap';
 
 .copy-small {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+    opacity: .87;
 }
 
 .rarity-icon svg {
-  height: 16px;
+  height: 14.5px;
   width: auto;
   display: inline-block;
 }
 
 .price-label {
     color: hsl(122, 39%, 49%);
+    font-size: 0.825rem;
 }
 
 .price-label:nth-of-type(n+2) {

src/pages/pokemon.astro

@@ -10,7 +10,7 @@ import { db } from '../db';
 //const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
 const pokemon = await db.query.cards.findMany({
     where: { productLineName: "pokemon" },
-    limit: 32,
+    limit: 320,
     with: {
         prices: true,
     }
@@ -23,24 +23,20 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
 <div class="container">
     <h1 class="my-5">Rigid's app thing</h1>
     <div class="row">
-        <div class="col-sm-12 col-md-2">
+        <div class="col-sm-12 col-md-3">
             <div class="h5">Inventory management placeholder</div>
         </div>
-        <div class="col-sm-12 col-md-10">
+        <div class="col-sm-12 col-md-9">
                 <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
             {pokemon.map((card) => (
                 <div class="col">
                     <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
-                    <div class="row row-cols-2">
-                        <div class="col-auto h6">{card.productName}</div>
-                        <div class="col-auto ms-auto copy-small">{card.number}</div>
-                    </div>
-                    <div class="row justify-content-end">
-                        <div class="col-auto ms-auto">
+                    <div class="col-auto h6 my-0">{card.productName}</div>
+                    <div class="d-flex justify-content-between">
+                        <div class="copy-small">{card.number}</div>
                         <RarityIcon rarity={card.rarityName} />
                     </div>
-                    </div>
-                    <div class="row row-cols-5 gx-0 mt-1">
+                    <div class="row row-cols-5 gx-1 mt-1">
                     {card.prices
                         .slice()
                         .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
@@ -48,7 +44,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
                         arr.findIndex(p => p.condition === price.condition) === index
                         )
                         .map((price) => (
-                        <div class="col copy-small p price-label">
+                        <div class="col p price-label">
                             {price.condition.split(' ').map((w) => w[0]).join('')}
                             <br />${price.marketPrice}
                         </div>