.reservation-container {
  width: 100%;
  min-height: 100vh;
  background: url("../images/w/productlist-banner.jpg")
    no-repeat center center;
  background-size: cover;
  position: relative;
  padding-top: 200px;
  text-align: center;
}
.reservation-container::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.85);
}
.reservation-container > div {
  position: relative;
  z-index: 10;
}
.title p:last-child {
  font-size: 14px;
  color: #333;
}
.subtitle {
  margin-top: 70px;
  margin-bottom: 30px;
}
.subtitle p {
  font-size: 13px;
}
.subtitle p:first-child {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 原来是 :first-child —— 那是给「两个二维码之间留间距」写的。
   但现在只有一个 item，它既是 first 也是 last，那 100px 就把它
   推离了页面中心 50px。改成 :not(:last-child)：只在真有兄弟时才留间距。 */
.content .reservation-item:not(:last-child) {
  margin-right: 100px;
}
.content .reservation-item {
  width: 80px;
}
/* 80px 是旧站的值，那是按「一个 item 一张二维码」定的。
   而实际内容是一张 1600×1184 的**四合一**图（#SONG #CHEN #XIAO #ANN），
   塞进 80px 之后每个码只有 40 像素见方 —— 扫不出来，等于这一页没用。
   真站上也是这样，这里是有意偏差：**二维码扫不了就失去了存在的意义**。

   用 :only-child 限定，所以只影响「单张合成图」这一种情况；
   哪天客户把四个码拆成四张分别上传，每个 item 会自动回到 80px。 */
.content .reservation-item:only-child {
  width: 360px;
}
.content .reservation-item img {
  width: 100%;
  object-fit: contain;
  display: block;
}
.content .reservation-item p {
  margin-top: 10px;
}