src/shared/ui/Card/ui/Card.test.tsx

@@ -42,7 +42,7 @@ describe('Card', () => {
 describe('CardHeader', () => {
   it('renders children with bottom margin', () => {
     render(<CardHeader>Header</CardHeader>);
-    expect(screen.getByText('Header')).toHaveClass('mb-4');
+    expect(screen.getByText('Header')).toHaveClass('mb-6');
   });
 });
 describe('CardTitle', () => {
@@ -69,6 +69,6 @@ describe('CardFooter', () => {
   it('renders children with top border', () => {
     render(<CardFooter>Footer</CardFooter>);
     const el = screen.getByText('Footer');
-    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6');
+    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6', 'md:mt-8', 'md:pt-8');
   });
 });

src/shared/ui/Card/ui/Card.tsx

@@ -55,7 +55,7 @@ interface SlotProps {
  * Card header wrapper — adds bottom margin.
  */
 export function CardHeader({ children, className }: SlotProps) {
-  return <div className={cn('mb-4', className)}>{children}</div>;
+  return <div className={cn('mb-6 md:mb-8', className)}>{children}</div>;
 }
 
 /**
@@ -83,5 +83,5 @@ export function CardContent({ children, className }: SlotProps) {
  * Card footer — separated by a brutal border-top.
  */
 export function CardFooter({ children, className }: SlotProps) {
-  return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>;
+  return <div className={cn('mt-6 md:mt-8 pt-6 md:pt-8 brutal-border-top', className)}>{children}</div>;
 }