Refactor: Standardize card and grid layouts

src/components/designers/DesignerCard.tsx

@@ -26,7 +26,7 @@ export function DesignerCard({ company }: DesignerCardProps) {
       onClick={handleClick}
     >
       {/* Header Image/Logo Section */}
-      <div className="relative aspect-video bg-gradient-to-br from-background to-muted/50 flex items-center justify-center border-b border-border">
+      <div className="relative aspect-[4/3] bg-gradient-to-br from-background to-muted/50 flex items-center justify-center border-b border-border">
         {/* Background Gradient Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
         
@@ -54,9 +54,9 @@ export function DesignerCard({ company }: DesignerCardProps) {
         </div>
       </div>
 
-      <CardContent className="p-6 space-y-4">
+      <CardContent className="p-4 space-y-3">
         {/* Company Name */}
-        <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-1">
+        <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
           {company.name}
         </h3>
 

src/components/manufacturers/ManufacturerCard.tsx

@@ -40,7 +40,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -85,9 +85,9 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
         )}
       </div>
 
-      <CardContent className="p-3 md:p-4 space-y-2 md:space-y-3">
+      <CardContent className="p-4 space-y-3">
         {/* Company Name */}
-        <h3 className="text-base md:text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[2.5rem] md:min-h-[3rem]">
+        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
           {company.name}
         </h3>
 

src/components/operators/OperatorCard.tsx

@@ -27,7 +27,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -74,7 +74,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
 
       <CardContent className="p-4 space-y-3">
         {/* Company Name */}
-        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
+        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
           {company.name}
         </h3>
 

src/components/park-owners/ParkOwnerCard.tsx

@@ -27,7 +27,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -74,7 +74,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
 
       <CardContent className="p-4 space-y-3">
         {/* Company Name */}
-        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
+        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
           {company.name}
         </h3>
 

src/components/parks/ParkCard.tsx

@@ -74,10 +74,10 @@ export function ParkCard({ park }: ParkCardProps) {
           </Badge>
         </div>
 
-        <CardContent className="p-3 lg:p-3 xl:p-3.5 2xl:p-3 space-y-2 lg:space-y-2 xl:space-y-2.5">
+        <CardContent className="p-4 space-y-3">
           {/* Header */}
           <div className="space-y-1">
-            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
               {park.name}
             </h3>
             

src/components/rides/RideCard.tsx

@@ -85,10 +85,10 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
           </Badge>
         </div>
 
-        <CardContent className="p-3 lg:p-3 xl:p-3.5 2xl:p-3 space-y-2 lg:space-y-2 xl:space-y-2.5">
+        <CardContent className="p-4 space-y-3">
           {/* Header */}
           <div className="space-y-1">
-            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
               {ride.name}
             </h3>
             

src/components/rides/RideModelCard.tsx

@@ -42,7 +42,7 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
   return (
     <Card className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group">
       <div 
-        className="aspect-video bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
+        className="aspect-[4/3] bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
       >
         {(cardImageUrl || cardImageId) ? (
           <img 
@@ -64,7 +64,7 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
       </div>
 
       <CardContent className="p-4 space-y-3">
-        <h3 className="font-semibold text-lg line-clamp-1 group-hover:text-primary transition-colors">
+        <h3 className="font-semibold text-lg line-clamp-2 min-h-[3.5rem] group-hover:text-primary transition-colors">
           {model.name}
         </h3>
 

src/pages/ParkOwners.tsx

@@ -206,7 +206,7 @@ const ParkOwners = () => {
 
         {/* Property Owners Grid */}
         {!isLoading && filteredAndSortedOwners && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
             {filteredAndSortedOwners.map((owner) => (
               <ParkOwnerCard key={owner.id} company={owner} />
             ))}

src/pages/RideModelRides.tsx

@@ -271,7 +271,7 @@ export default function RideModelRides() {
         </div>
 
         {filteredRides.length > 0 ? (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
             {filteredRides.map((ride) => (
               <RideCard key={ride.id} ride={ride} showParkName={true} />
             ))}