:root {
            --primary-blue: #0063dc;
            --dark-gray: #111;
            --light-gray: #f4f4f4;
        }
        body { font-family: Arial, sans-serif; margin: 0; color: #333; line-height: 1.6; }
        header { padding: 2rem; text-align: center; border-bottom: 1px solid #ddd; }
        .logo { max-width: 200px; display: block; margin: 0 auto; }
        nav { margin-top: 1rem; }
        nav a { margin: 0 10px; text-decoration: none; color: var(--primary-blue); font-weight: bold; }
        .hero { background: var(--dark-gray); height: 300px; display: flex; align-items: center; justify-content: center; color: white; }
        .container { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
        .post-card { border: 1px solid #eee; padding: 1rem; transition: transform 0.2s; }
        .post-card:hover { transform: translateY(-5px); }
        .img-placeholder { width: 100%; height: 200px; background: linear-gradient(45deg, #007ee5, #00b4b3); margin-bottom: 1rem; }
        footer { text-align: center; padding: 2rem; border-top: 1px solid #ddd; margin-top: 2rem; color: #777; }
        @media (min-width: 768px) { .container { grid-template-columns: repeat(3, 1fr); } }