.booking {
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 22px;
}
.booking > div:first-child { text-align: right; }
.booking h2 { white-space: nowrap; font-size: 26px; }
.booking form .booking-promotion { margin-top: -36px; }
@media (max-width: 1100px) {
  .booking { grid-template-columns: 1fr; }
  .booking > div:first-child { text-align: left; }
}
@media (max-width: 700px) {
  .booking h2 { font-size: 25px; }
  .booking form { --date-row: 1; --promo-row: 2; --guests-row: 3; --children-row: 4; }
  .booking form:has(.booking-category:not([hidden])) { --date-row: 2; --promo-row: 3; --guests-row: 4; --children-row: 5; }
  .booking form > .booking-category { grid-row: 1; }
  .booking form > label:has(#checkin), .booking form > label:has(#checkout) { grid-row: var(--date-row); }
  .booking form .booking-promotion { grid-row: var(--promo-row); grid-column: 1 / -1; margin: 0; }
  .booking form > .guest-group { grid-row: var(--guests-row); grid-column: 1; }
  .booking form > button[type="submit"] { grid-row: var(--guests-row); grid-column: 2; }
  .booking #children-panel { grid-row: var(--children-row); }
}

/* Match the outer edges of the homepage content at every viewport width. */
.page-home .booking {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--width);
  margin-left: auto;
  margin-right: auto;
}