From 931a2bf58c039898fb7ebc7772f1093679dcb1bf Mon Sep 17 00:00:00 2001
From: Yuto Takano <moa17stock@gmail.com>
Date: Mon, 2 Dec 2024 16:30:37 +0100
Subject: [PATCH] Make the first item in Shop not 1:1 square to fill extra gap
 space

---
 src/components/Shop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Shop.tsx b/src/components/Shop.tsx
index 2aceeda..691f035 100644
--- a/src/components/Shop.tsx
+++ b/src/components/Shop.tsx
@@ -45,7 +45,7 @@ export const Shop: FunctionComponent<ShopProps> = ({ shop_items, className }) =>
       )}
       <ul className="grid grid-cols-2 grid-rows-3 md:grid-cols-4 xl:grid-rows-2 gap-4">
         {shop_items.map((item, i) => (
-          <li key={item.id} className={(i % 3 == 0 ? "bg-christmasGreen" : i % 3 == 1 ? "bg-christmasRed" : "bg-christmasDark") + " transform-gpu overflow-hidden rounded-xl group relative flex flex-col " + (i == 0 ? "row-span-2 col-span-2 aspect-square" : "row-span-1 col-span-2 aspect-[2] xl:col-span-1 xl:aspect-square")}>
+          <li key={item.id} className={(i % 3 == 0 ? "bg-christmasGreen" : i % 3 == 1 ? "bg-christmasRed" : "bg-christmasDark") + " transform-gpu overflow-hidden rounded-xl group relative flex flex-col " + (i == 0 ? "row-span-2 col-span-2" : "row-span-1 col-span-2 aspect-[2] xl:col-span-1 xl:aspect-square")}>
             <img src={item.image_url} alt={item.name} className="[mask-image:linear-gradient(to_top,transparent_00%,#000_100%)] group-hover:scale-105 transition-all duration-150" />
             <div className="absolute top-0 right-0 text-white p-2 bg-black bg-opacity-50 rounded-bl-xl">
               {item.remaining_count}