.top-posts-container { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 40px auto; background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-family: 'Georgia', serif; } .main-post { flex: 2; min-width: 300px; display: flex; flex-direction: column; align-items: center; padding: 20px; } .image-wrapper { position: relative; width: 100%; max-width: 600px; } .main-post img { width: 100%; height: auto; display: block; border-radius: 8px; } .ribbon { position: absolute; top: 10px; left: -20px; background: #c56a75; color: white; padding: 6px 14px; font-size: 14px; font-weight: bold; transform: rotate(-45deg); z-index: 10; } .main-post-content { max-width: 600px; width: 100%; padding-top: 20px; } .main-post-content h2 { font-size: 26px; margin-bottom: 12px; } .main-post-content p { font-size: 16px; color: #444; line-height: 1.6; } .main-post-content a { color: #c56a75; text-decoration: none; font-style: italic; font-weight: bold; } .side-posts { flex: 1; min-width: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; } .side-post { display: flex; margin-bottom: 24px; align-items: center; } .side-post img { width: 90px; height: 90px; object-fit: cover; margin-right: 12px; border-radius: 4px; background: #eee; } .side-post h3 { font-size: 17px; margin: 0; line-height: 1.4; } .side-post h3 a { color: #333; text-decoration: none; } .side-post h3 a:hover { text-decoration: underline; } @media (max-width: 768px) { .top-posts-container { flex-direction: column; } .side-posts { flex-direction: row; gap: 15px; flex-wrap: wrap; } .side-post { flex: 1 1 45%; } .side-post img { width: 80px; height: 80px; } }