.demo-banner {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 0.25rem solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color);
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.demo-card {
  padding: 0.8rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.35rem;
}

.demo-card h3 {
  margin-top: 0;
}

.demo-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  margin-bottom: 0;
}

.demo-card dd {
  margin: 0;
  text-align: right;
}

/* Hide the site title at the top of the primary navigation drawer. */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* Make the desktop logo and site-title area a single link to the homepage. */
@media screen and (min-width: 76.25em) {
  .md-header__button.md-logo::after {
    position: absolute;
    top: -0.2rem;
    left: -0.2rem;
    width: 10rem;
    height: 2.4rem;
    content: "";
  }
}

/* Indent every submenu, including categories and individual feature pages. */
.md-nav--primary .md-nav[data-md-level] > .md-nav__list {
  padding-inline-start: 0.9rem;
}

/* Material uses separate sliding panels on narrow screens. Preserve their
   interaction while retaining the indentation for each navigation depth. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list {
    padding-inline-start: 1.8rem;
  }

  .md-nav--primary .md-nav[data-md-level="3"] > .md-nav__list {
    padding-inline-start: 2.7rem;
  }
}

/* Keep the community label and QR code side by side on the homepage. */
.wechat-community {
  display: grid;
  grid-template-columns: auto minmax(0, 280px);
  align-items: start;
  justify-content: start;
  gap: 0.75rem;
  margin: 1em 0;
}

.wechat-community > strong {
  white-space: nowrap;
}

.wechat-community > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}