:root {
        --primary: #ed1940;
        --dark: #2f4154;
        --nav: #6d7b7b;
        --bg: #fcfcfc;
        --text: #383a3c;
    }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #eee; color: var(--text); line-height: 1.6; }
    .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
    header { padding: 40px 0; text-align: center; }
    .logo-container { width: 240px; height: 99px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-weight: bold; font-size: 24px; }
    .navigation { background: var(--nav); color: white; margin-bottom: 30px; }
    .menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; }
    .menu li a { display: block; padding: 15px 20px; color: white; text-decoration: none; font-weight: 600; }
    .menu li a:hover { background: var(--primary); }
    .hero-container { background: #fff; padding: 20px; border-bottom: 5px solid var(--primary); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
    .post-card { border: 1px solid #ddd; padding: 15px; background: white; }
    .post-img { width: 100%; height: 200px; background: #ccc; display: flex; align-items: center; justify-content: center; color: #666; margin-bottom: 10px; }
    .post-card h3 { margin: 10px 0; }
    .footer { background: var(--dark); color: #fff; padding: 40px 0; text-align: center; margin-top: 50px; }
    @media (max-width: 768px) { .menu { flex-direction: column; } .hero-container { grid-template-columns: 1fr; } }