Fix grid overflow to 3 columns

app/src/components/ListingCard.tsx

@@ -103,13 +103,16 @@ export function ListingCard({ product, variant = "grid" }: ListingCardProps): JS
       onPress={openListing}
       onHoverIn={() => setIsHovered(true)}
       onHoverOut={() => setIsHovered(false)}
-      className="w-full p-1.5 md:w-1/2 lg:w-1/4"
+      className="w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-18px)]"
     >
       <Surface
         variant="default"
         className={`gap-0 overflow-hidden rounded-xl border p-0 ${isHovered ? "border-border-secondary" : "border-border"}`}
       >
-        <View className="aspect-[4/3] items-center justify-center" style={{ backgroundColor: product.bg }}>
+        <View
+          className="aspect-[4/3] items-center justify-center"
+          style={{ backgroundColor: product.bg }}
+        >
           <CardHighlightOverlay gradientId={`card-highlight-${product.id}`} />
           <Typography className="text-6xl lg:text-7xl">{product.emoji}</Typography>
         </View>