From b7824ac999cfc38931754a422051654c45d121a1 Mon Sep 17 00:00:00 2001
From: 230419 <230419@epvc.pt>
Date: Wed, 6 May 2026 09:47:08 +0100
Subject: [PATCH] card preference 2

---
 src/App.jsx     |  8 ++++++--
 src/lib/i18n.js | 10 +++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7d0842d..5a68d87 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1191,10 +1191,14 @@ export default function App() {
                                 </div>
                             )}
 
-                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-10">
+                            <div className={
+                                cardSize === 'small' ? 'grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-6' 
+                                : cardSize === 'medium' ? 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-8' 
+                                : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-10'
+                            }>
                                 {filteredClothes.map(item => (
                                     <div key={item.id} className="group">
-                                        <Card className={`overflow-hidden p-0 relative border-none hover:shadow-2xl transition-all duration-500 ${cardSize === 'small' ? 'h-[240px]' : cardSize === 'medium' ? 'h-[360px]' : 'h-[480px]'}`} darkMode={darkMode}>
+                                        <Card className={`overflow-hidden p-0 relative border-none hover:shadow-2xl transition-all duration-500 ${cardSize === 'small' ? 'h-[180px]' : cardSize === 'medium' ? 'h-[320px]' : 'h-[480px]'}`} darkMode={darkMode}>
                                             <img src={item.imageUrl} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt={item.name} />
 
                                             <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6 pb-[136px] text-white z-10 pointer-events-none">
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 3921584..1cffd87 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -192,7 +192,7 @@ export const translations = {
         selectOneColor: "Selecione pelo menos uma cor",
         addColorsToItems: "Adicione cores aos seus itens.",
         or: "OU",
-        cardSize: "Tamanho do Card",
+        cardSize: "Tamanho dos itens",
         cardSizeDesc: "Tamanho no armário/carrinho",
         small: "Pequeno",
         medium: "Médio",
@@ -391,7 +391,7 @@ export const translations = {
         selectOneColor: "Select at least one color",
         addColorsToItems: "Add colors to your items.",
         or: "OR",
-        cardSize: "Card Size",
+        cardSize: "Item Size",
         cardSizeDesc: "Size in closet/cart",
         small: "Small",
         medium: "Medium",
@@ -590,7 +590,7 @@ export const translations = {
         selectOneColor: "Selecciona al menos un color",
         addColorsToItems: "Añade colores a tus artículos.",
         or: "O",
-        cardSize: "Tamaño de Tarjeta",
+        cardSize: "Tamaño de los ítems",
         cardSizeDesc: "Tamaño en armario/carrito",
         small: "Pequeño",
         medium: "Medio",
@@ -789,7 +789,7 @@ export const translations = {
         selectOneColor: "Sélectionnez au moins une couleur",
         addColorsToItems: "Ajoutez des couleurs à vos articles.",
         or: "OU",
-        cardSize: "Taille de la Carte",
+        cardSize: "Taille des articles",
         cardSizeDesc: "Taille dans placard/panier",
         small: "Petit",
         medium: "Moyen",
@@ -988,7 +988,7 @@ export const translations = {
         selectOneColor: "Wählen Sie mindestens eine Farbe",
         addColorsToItems: "Fügen Sie Ihren Artikeln Farben hinzu.",
         or: "ODER",
-        cardSize: "Kartengröße",
+        cardSize: "Artikelgröße",
         cardSizeDesc: "Größe in Schrank/Warenkorb",
         small: "Klein",
         medium: "Mittel",