body { font-family: sans-serif; background: #f4f4f4; margin: 0; padding: 0; line-height: 1.6; }
header { background: #333; color: #fff; padding: 1rem 0; text-align: center; }
.container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* Основной блок */
.main-content { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.joke-item { border-bottom: 1px solid #eee; padding: 15px 0; }
.joke-meta { font-size: 0.85rem; color: #777; margin-top: 10px; }
.pagination { margin-top: 20px; text-align: center; font-size: 1.5rem; }
.pagination a { text-decoration: none; margin: 0 15px; color: #333; }

/* Сайдбар */
.sidebar { display: flex; direction: column; gap: 20px; flex-direction: column; }
.sidebar-block { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.sidebar-block h3 { margin-top: 0; border-bottom: 2px solid #333; }
.meme-adaptive { width: 100%; height: auto; display: block; }

/* Поиск */
.search-form { margin-bottom: 20px; display: flex; }
.search-form input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; }
.search-form button { padding: 10px 20px; border: none; background: #333; color: #fff; cursor: pointer; border-radius: 0 4px 4px 0; }

/* Мобильная адаптация */
@media (max-width: 768px) {
    .container { grid-template-columns: 1fr; }
    .sidebar { order: 2; } /* Сайдбар уходит вниз */
    .main-content { order: 1; }
}

/* Стили для адаптивных изображений */
.meme-adaptive {
    width: 100%;
    max-height: 500px; /* Ограничиваем высоту для слишком длинных мемов */
    object-fit: contain; /* Картинка вписывается полностью без искажений */
    background: #f0f0f0;
    border-radius: 8px;
    display: block;
}

.sidebar img {
    max-height: 300px;
    object-fit: cover; /* В сайдбаре лучше обрезать края, чтобы было ровно */
}