.restaurant .page-title {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.restaurant .page-title h1 {
  color: var(--dark-gray);
}
.restaurant .page-title p {
  font-size: 0.75rem;
}

.restaurant .content {
  margin-bottom: 1rem;
}
.restaurant .card .badge {
  background-color: var(--green-shade-5);
}
.restaurant .card-green .card-body {
  border-radius: 0 0 0.5rem 0.5rem;
}

/* The figure caption heading is an <h2> for the document outline (it labels the
   whole figure), held at the <h3> size it has always rendered at so promoting
   the tag changed no pixels. */
.restaurant figcaption h2 {
  font-size: 125%;
}

.restaurant-editorial {
  margin-bottom: 3rem;
}

.restaurant-faq h3 {
  margin-bottom: 0.25rem;
}
.restaurant-faq p {
  margin-top: 0;
}

@media only screen and (min-width: 900px) {
  .restaurant .page-title p {
    font-size: 1.5rem;
  }

  /* Two rows so the enrichment blocks sit under the figure on desktop while
     staying after the order form in the DOM (see restaurants/show.html.erb):
     below 900px this is plain block flow, and source order is what a phone
     scrolls through. */
  .restaurant .layout {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 32px;
    grid-template-areas:
      "content sidebar"
      "extra sidebar";
    align-content: start;
  }

  .restaurant .sidebar {
    grid-area: sidebar;
  }

  .restaurant .content {
    grid-area: content;
  }

  .restaurant .content-extra {
    grid-area: extra;
  }
}