/* About artwork provides a soft botanical surround outside the reading area. */
.ss-about.ss-frame {
  background-image: linear-gradient(to bottom, #fff 0%, #fff 68%, #eef5fb 86%, #e1edf8 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ss-about.ss-frame::before, .ss-about.ss-frame::after {
  display: block;
  top: 10%; bottom: auto;
  width: clamp(88px, 8.4vw, 160px);
  height: clamp(264px, 25.2vw, 480px);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .67;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent);
}
.ss-about.ss-frame::before { left: -12px; background-image: url(../img/frames/about/left.webp); }
.ss-about.ss-frame::after { right: -12px; top: 25%; background-image: url(../img/frames/about/right.webp); }
.ss-about__border {
  position: absolute;
  inset: auto 0 0;
  height: clamp(80px, 9.4vw, 180px);
  pointer-events: none;
  z-index: 0;
  opacity: .62;
}
.ss-about__border::before, .ss-about__border::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(112px, 15vw, 280px);
  background-image: url(../img/frames/about/bottom.webp);
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.ss-about__border::before {
  left: 0;
  background-position: left bottom;
  mask-image: linear-gradient(to right, #000 70%, transparent);
}
.ss-about__border::after {
  right: 0;
  background-position: right bottom;
  mask-image: linear-gradient(to left, #000 70%, transparent);
}
@media (max-width: 960px) {
  .ss-about.ss-frame::before, .ss-about.ss-frame::after { display: none; }
}

/* Table service on the left, pool and beach service on the right. */
.ss-services.ss-frame--bottom { background-image: none; }
.ss-services.ss-frame::before, .ss-services.ss-frame::after {
  display: block;
  top: auto;
  bottom: 0;
  width: clamp(240px, 24vw, 460px);
  height: auto;
  aspect-ratio: 3 / 2;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .72;
  -webkit-mask-image: none;
  mask-image: none;
}
.ss-services.ss-frame::before {
  left: 0;
  background-image: url(../img/frames/services/left.webp);
  background-position: left bottom;
}
.ss-services.ss-frame::after {
  right: 0;
  background-image: url(../img/frames/services/right.webp);
  background-position: right bottom;
}
@media (max-width: 960px) {
  .ss-services.ss-frame--bottom { padding-bottom: 100px; }
  .ss-services.ss-frame::before, .ss-services.ss-frame::after {
    width: clamp(150px, 24vw, 230px);
    opacity: .62;
  }
}