/* ==============================================
   # БАЗОВЫЕ СТИЛИ
   ============================================== */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Lora', serif;
  background: #f9f7f4 url('../assets/bg2.webp') repeat;
  background-size: 300px auto;
  color: #222;
  line-height: 1.6;
}

a {
  color: #734c2f;
}

img.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==============================================
   # ЛАЙОТ И СЕТКА
   ============================================== */
.container {
  max-width: 1100px;
  margin: 10px auto;

}

.content-sidebar-wrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.content-sidebar-wrapper.no-sidebar {
  display: block;
  max-width: 100%;
}

.no-sidebar .main-content-grey {
  width: 100%;
  max-width: 1100px;
  margin: 30px auto;
  padding: 2rem 1rem;
  background-image: url('../assets/crossword.webp');
  border-radius: 6px;
}

.no-sidebar .main-content {
  width: 100%;
  max-width: 1100px;
  margin: 30px auto;
  padding: 2rem 1rem;
}

/* =====================================
   Longread: 860px внутри no-sidebar
   ===================================== */
.main-content-860{
  max-width: 860px;     /* вместо твоих 1100 */
  margin: 0 auto;    /* центрирование */
  padding: 0;        /* можно 2rem 2rem, как нравится */
}

/* Мобилка */
@media (max-width: 768px){
  .main-content-860{
    max-width: 100%;
    padding: 20px;
  }
}

.main-content {
  flex: 1 1 0;
  max-width: 700px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.05);
  border-radius: 6px;
}

.sidebar {
  width: 300px;
  background: #f9f9f9;
  padding: 20px 12px 10px 12px;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.03);
  border-radius: 6px;
  font-style: italic;
}

.sidebar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin-top: 10px;
}
.latest-posts-sidebar h3 {padding:10px 0 0 0; text-align:center;}