feat: update SoundCard styling and adjust layout in SoundsPage for better responsiveness

src/components/sounds/SoundCard.tsx

@@ -53,7 +53,7 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
         {/* Type badge */}
         <Badge
           variant={getBadgeVariant(sound.type)}
-          className="absolute top-2 left-2 text-xs px-1.5 py-0.5 h-5"
+          className="absolute top-2 left-2 text-xs px-1 py-0 h-4 text-[10px]"
         >
           {sound.type}
         </Badge>
@@ -79,7 +79,7 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
           />
         </button>
 
-        <h3 className="font-medium text-s truncate pl-12 pr-8">{sound.name}</h3>
+        <h3 className="font-medium text-s truncate pl-8 pr-6">{sound.name}</h3>
         <div className="grid grid-cols-2 gap-1 text-xs text-muted-foreground">
           <div className="flex">
             <Clock className="h-3.5 w-3.5 mr-0.5" />

src/pages/SoundsPage.tsx

@@ -307,7 +307,7 @@ export function SoundsPage() {
     }
 
     return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
         {sounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}