card preference 2

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">