.main-blog {
  background-color: rgb(var(--color-background));
}

.main-blog__container {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

@media (max-width: 959px) {
  .main-blog__container {
    gap: 30px;
  }
}

.main-blog__list {
  --column-gap: 22px;
  --row-gap: 50px;
}

@media (max-width: 959px) {
  .main-blog__list {
    --row-gap: 40px;
  }
}

@media (min-width: 960px) {
  .main-blog__list[data-layout="list"] .main-blog__item {
    grid-column: span 2;
  }

  .main-blog__list[data-layout="list"] .main-blog__item:nth-child(3n - 1),
  .main-blog__list[data-layout="list"] .main-blog__item:nth-child(3n) {
    grid-column: span 1;
  }
}

@media (min-width: 960px) {
  .main-blog__list[data-layout="grid"] {
    --desktop-columns: var(--grid-desktop-columns);
  }
}

.main-blog__title {
  color: rgba(var(--color-text));
}

/* Hanwen blog collections: native blog routes + configurable navigation menu. */
.main-blog__layout { min-width: 0; }
.main-blog__content { min-width: 0; }
.main-blog__layout--sidebar { display: grid; grid-template-columns: 244px minmax(0, 1fr); column-gap: 36px; align-items: start; }
.hw-blog-sidebar { min-width: 0; padding-right: 23px; border-right: 1px solid rgba(var(--color-text), .13); }
.hw-blog-sidebar__heading { margin: 0 0 21px; font-family: "Noto Serif SC", "Songti SC", serif; font-weight: 500; font-size: 24px; line-height: 1.45; color: rgb(var(--color-text)); }
.hw-blog-sidebar__list, .hw-blog-sidebar__children { list-style: none; padding: 0; margin: 0; }
.hw-blog-sidebar__item { margin: 0; }
.hw-blog-sidebar__link, .hw-blog-sidebar__label { display: block; width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 400; line-height: 1.5; text-decoration: none; color: rgb(var(--color-text)); border-left: 3px solid transparent; overflow-wrap: anywhere; }
.hw-blog-sidebar__link:hover, .hw-blog-sidebar__link:focus-visible { color: #35291f; background: rgba(133,105,77,.075); }
.hw-blog-sidebar__link.is-active { background: #e6e0da; border-left-color: #49392c; color: #35291f; font-weight: 600; }
.hw-blog-sidebar__link.has-active-child:not(.is-active) { font-weight: 600; }
.hw-blog-sidebar__children { padding-left: 12px; }
.hw-blog-sidebar__link--child { font-size: 14px; padding-block: 9px; }
.main-blog__layout--sidebar .main-blog__container { gap: 27px; }
.main-blog__layout--sidebar .main-blog__title { text-align: left; }
.main-blog__layout--sidebar .main-blog__list { --column-gap: 22px; --row-gap: 33px; grid-auto-flow: row; overflow-x: visible; }
.main-blog__layout--sidebar .main-blog__list[data-layout="list"] { --desktop-columns: 2; }
.main-blog__layout--sidebar .main-blog__item { min-width: 0; }
.main-blog__layout--sidebar .block-article-card { text-align: left; }
.main-blog__layout--sidebar .block-article-card__info { text-align: left; }
.main-blog__layout--sidebar .block-article-card__excerpt { text-align: left; }
@media (min-width: 960px) and (max-width: 1199px) {
  .main-blog__layout--sidebar { grid-template-columns: 215px minmax(0, 1fr); column-gap: 23px; }
  .hw-blog-sidebar { padding-right: 14px; }
  .main-blog__layout--sidebar .main-blog__list[data-layout="grid"] { --desktop-columns: 2; }
}
@media (max-width: 959px) {
  .main-blog__layout--sidebar { display: flex; flex-direction: column; align-items: stretch; row-gap: 22px; }
  .hw-blog-sidebar { width: 100%; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid rgba(var(--color-text), .14); }
  .hw-blog-sidebar__heading { font-size: 20px; margin-bottom: 10px; }
  .hw-blog-sidebar__nav { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .hw-blog-sidebar__list { display: flex; width: max-content; max-width: none; gap: 5px; align-items: center; }
  .hw-blog-sidebar__item { display: flex; align-items: center; }
  .hw-blog-sidebar__link, .hw-blog-sidebar__label { width: auto; white-space: nowrap; padding: 9px 13px; font-size: 14px; border-left: 0; border-bottom: 2px solid transparent; }
  .hw-blog-sidebar__link.is-active { border-left: 0; border-bottom-color: #49392c; }
  .hw-blog-sidebar__children { display: flex; padding: 0 0 0 4px; }
  .main-blog__layout--sidebar .main-blog__container { gap: 22px; }
  .main-blog__layout--sidebar .main-blog__list { --row-gap: 26px; --mobile-columns: 1; grid-auto-flow: row; }
}