---

* { box-sizing: border-box; font-family: sans-serif; }
body { margin: 0; background: #f4f4f4; }

.navbar { display: flex; justify-content: space-between; padding: 1rem 5%; background: #333; color: white; align-items: center; }
.navbar a { color: white; margin-right: 15px; text-decoration: none; }

.container { display: flex; padding: 20px; gap: 20px; max-width: 1200px; margin: auto; }

/* Адаптивная сетка статей */
.articles-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px; 
    flex: 3; 
}

.article-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.article-card img { width: 100%; height: 180px; object-fit: cover; }
.article-card div { padding: 15px; }

.sidebar { flex: 1; background: white; padding: 15px; height: fit-content; border-radius: 8px; }

/* Модальное окно */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content { background: white; width: 350px; margin: 10% auto; padding: 20px; border-radius: 10px; position: relative; }
.close { position: absolute; right: 15px; cursor: pointer; font-size: 24px; }

.btn-social { width: 100%; margin-bottom: 10px; padding: 10px; cursor: pointer; border: none; color: white; }
.google { background: #db4437; }
.fb { background: #4267B2; }

/* Планшеты и телефоны */
@media (max-width: 768px) {
    .container { flex-direction: column; }
    .sidebar { order: -1; }
}