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

.restaurants.page-banner .page-title {
  padding: 4rem 0 0 0;
}
.restaurants.page-banner .page-title h1 {
  color: var(--dark-blue);
}

.restaurants-search {
  margin: 1rem auto 4rem auto;
  max-width: 50rem;
}
.restaurants-search .control {
  box-shadow: 0 0 0 1px var(--border-gray);
}

.restaurant-list {
  margin-bottom: 6rem;
}

.restaurant-row {
  border-radius: 4px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 108px 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "thumbnail name"
    "thumbnail location"
    "thumbnail badges"
    "thumbnail mealtimes";
  padding: 1rem;
}
.restaurant-row:nth-child(odd) {
  background-color: var(--faint-gray);
}

.restaurant-thumbnail {
  grid-area: thumbnail;
}
.restaurant-thumbnail img {
  border-radius: 4px;
  display: block;
}

.restaurant-name {
  grid-area: name;
}
.restaurant-name h4 {
  margin: 0;
}
.restaurant-name .restaurant-badges {
  display: none;
}

.restaurant-badges {
  margin: -0.5rem 0 -0.5rem 0;
}
.restaurant-badges .badge {
  margin: 0 0 0.25rem 0;
}

.restaurant-row > .restaurant-badges {
  grid-area: badges;
}

.restaurant-location {
  grid-area: location;
  margin: -0.25rem 0 1rem 0;
}

.restaurant-mealtimes .badge {
  margin-bottom: 0.25rem;
}

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

  .restaurant-row {
    align-items: center;
    grid-template-columns: 108px 1fr 1fr 300px;
    grid-template-rows: auto;
    grid-template-areas: "thumbnail name location mealtimes";
  }

  .restaurant-name .restaurant-badges {
    display: block;
  }

  .restaurant-row > .restaurant-badges {
    display: none;
  }

  .restaurant-badges {
    margin: 0.5rem 0 0 0;
  }

  .restaurant-location {
    margin: 0;
  }

  .restaurant-mealtimes {
    text-align: right;
  }
}