/* The two service choices form one header for the promo panel below. */
html[data-customer-view="landing"] .service-space-options {
  gap: 0;
  margin-bottom: 0;
}

html[data-customer-view="landing"] .service-space-card,
html[data-customer-view="landing"] .service-space-card.active,
html[data-customer-view="landing"] .service-space-card.restaurant,
html[data-customer-view="landing"] .service-space-card.restaurant.active {
  color: #fff;
  border: 0;
  box-shadow: none;
  text-shadow: 0 1px 5px #13245a55;
  transition: filter .28s ease;
}

html[data-customer-view="landing"] .service-space-card:not(.restaurant),
html[data-customer-view="landing"] .service-space-card:not(.restaurant).active {
  border-radius: 22px 0 0 0;
  background: linear-gradient(160deg, #6741ed 0%, #4a3be6 58%, #2d4be0 100%);
}

html[data-customer-view="landing"] .service-space-card.restaurant,
html[data-customer-view="landing"] .service-space-card.restaurant.active {
  border-radius: 0 22px 0 0;
  background: linear-gradient(160deg, #ff9a3c 0%, #f4772d 58%, #ed5a25 100%);
}

html[data-customer-view="landing"] .service-space-card:not(.active) {
  filter: saturate(.82) brightness(.9);
}

html[data-customer-view="landing"] .service-space-card:hover {
  transform: none;
  filter: brightness(1.06);
  box-shadow: none;
}

html[data-customer-view="landing"] .service-space-card:active {
  transform: none;
}

html[data-customer-view="landing"] .service-space-card::before,
html[data-customer-view="landing"] .service-space-card::after {
  display: none;
}

html[data-customer-view="landing"] .service-space-card .service-space-text > i,
html[data-customer-view="landing"] .service-space-card.active .service-space-text > i {
  color: #fff;
  background: #ffffff36;
}

html[data-customer-view="landing"] .service-space-card small,
html[data-customer-view="landing"] .service-space-card.active small {
  color: #ffffffe6;
}

html[data-customer-view="landing"] .service-space-card .service-space-art {
  filter: drop-shadow(0 13px 12px #14237059);
}

@media (max-width: 680px) {
  html[data-customer-view="landing"] .service-space-card,
  html[data-customer-view="landing"] .service-space-card.active {
    min-height: 126px;
    padding: 6px 7px 9px;
  }

  html[data-customer-view="landing"] .service-space-card .service-space-art {
    top: -11px;
  }
}