/* Original tropical artwork, limited to the party booking page. */
body.site-page.booking {
  background-color: #fff2d7;
  background-image: linear-gradient(rgba(255, 242, 215, .76), rgba(255, 242, 215, .76)), url("assets/beach-sand-texture.webp");
  background-size: 512px 512px;
  background-position: center top;
  background-repeat: repeat;
}

body.site-page.booking::before {
  height: clamp(500px, 66.6667vw, 1280px);
  background: url("assets/tropical-background.webp") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}

/* Make room for the restored sign without changing the booking controls. */
.site-page.booking .intro {
  grid-template-columns: minmax(0, 1fr) 320px auto;
}

.site-page.booking .intro .location {
  grid-column: 3;
}

.site-page.booking .intro .beach-sign {
  grid-column: 2;
  grid-row: 1;
  width: 320px;
  max-width: 100%;
  height: 118px;
  margin: 0;
  padding: 24px 30px 28px;
  background: url("assets/beach-sign.webp") center / contain no-repeat;
}

@media (max-width: 1100px) {
  .site-page.booking .intro {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-page.booking .intro .location {
    grid-column: 2;
  }

  .site-page.booking .intro .beach-sign {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  body.site-page.booking::before {
    height: max(380px, 66.6667vw);
    background-size: max(100%, 570px) auto;
  }

  .site-page.booking .intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-page.booking .intro .location {
    grid-column: auto;
  }

  .site-page.booking .intro .beach-sign {
    width: 300px;
    height: 104px;
    padding: 20px 28px 26px;
  }
}