카드 컴포넌트 그리드

5. 카드 컴포넌트 그리드 Design a responsive card grid system: **Card Component**: - Aspect ratio: 4:3 image container (object-fit: cover) - Padding: 24px content area - Border-radius: 12px - Background: white - Shadow: 0 1px 3px rgba(0,0,0,0.1) - Hover: translateY(-4px) + shadow elevation increase **Card Content Structure**: - Category tag: 12px, uppercase, tracking-wide, accent color - Title: 18px/24px, font-weight 600, 2-line clamp - Description: 14px/20px, slate-600, 3-line clamp - Meta footer: Author avatar (32px) + name + date **Grid Layout**: - Desktop: 3 columns, 32px gap - Tablet: 2 columns, 24px gap - Mobile: 1 column, 16px gap - Max-width container: 1200px **Loading State**: - Skeleton with shimmer animation - Preserve exact dimensions Tech: React + Tailwind CSS + CSS Grid - Skeleton with shimmer animation 이란, 카드가 로딩되는 동안 화면에 흐릿한 카드 이미지를 보여주는 것을 말합니다. shimmer animation 은 카드가 로딩되는 동안 화면에 흐릿한 카드 이미지를 보여주는 애니메이션을 말합니다.