#3440 magazine card UI fixes and alignment

Author: equinorpiyush

web/sections/cards/Card/Card.tsx

@@ -45,18 +45,14 @@ export const Card = forwardRef<HTMLAnchorElement, CardProps>(function Card(
 ) {
   const commonStyling = `
   grid
-  grid-cols-1 
-  grid-rows-[35%_65%]
-  flex-col
-  gap-0
   rounded-card 
   w-full
   h-full
   `
 
   const variantClassNames: Record<Variants, string> = {
-    primary: `${commonStyling}`,
-    secondary: `${commonStyling}`,
+    primary: `${commonStyling} grid-rows-[auto_1fr]`,
+    secondary: `${commonStyling} grid-rows-[auto_1fr]`,
     compact: `w-full h-full rounded-card flex gap-4`,
     single: `grid grid-cols-[40%_auto] min-h-[450px] rounded-card`,
   }
@@ -108,4 +104,4 @@ export const Card = forwardRef<HTMLAnchorElement, CardProps>(function Card(
       {children}
     </BaseLink>
   )
-})
+})

web/sections/cards/Card/CardContent.tsx

@@ -47,7 +47,7 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
       <div
         ref={ref}
         className={twMerge(
-          `flex h-full gap-4 md:gap-6 ${variantClassNames[variant]}`,
+          `flex gap-4 md:gap-6 ${variantClassNames[variant]}`,
           className,
         )}
       >

web/sections/cards/MagazineCard/MagazineCard.tsx

@@ -24,7 +24,6 @@ const MagazineCard = forwardRef<HTMLAnchorElement, MagazineCardProps>(
         image={hero?.figure?.image}
         variant={'primary'}
         className={twMerge(`h-full w-full`, className)}
-        imageWrapperClassName='h-[45%]'
         key={id}
       >
         <Card.Content variant={'primary'}>